React refs 进阶篇 一 回调形式的refs_refs 的 ts是什么

React refs 进阶篇 一 回调形式的refs

注：回调形式的refs 分为两种

   一、内联函数形式应用
1

        class Demo extends React.Component{
            render(){
                return (
                    <div>
                        回调形式refs内联函数形式  
                        注：内联函数形式 更新数据时会触发两次，第一次调用返回为null  第二次返回当前节点
                        <input ref={ C => this.input = C} type="text"/> 
                        <button onClick={this.showData}>点击</button>    
                    </div>
                )
            }

            // 显示左侧input内容
            showData = ()=>{
                const {input} = this
                alert(input.value)
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('test'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、将回调函数改为class绑定形式

        class Demo extends React.Component{
            render(){
                return (
                    <div>
						回调形式refs类绑定式，放在了实例自身，需要在实例自身写回调函数
						<input ref={this.saveInput} type="text"/> 
						<button onClick={this.showData}>点击</button>    
                    </div>
                )
            }
            
            // 显示左侧input内容
            showData = ()=>{
                const {input} = this
                alert(input.value)
            }
	
			// input输入框refs回调函数类绑定 方法
			saveInput = (c) =>{
				this.input = c
			}
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23