React 学习笔记 —— refs 属性

字符串 ref

• 注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除

class Demo extends React.Component {
    handleChange = () => {
    	// 可以通过 refs 访问到被引用的标签
        this.refs.p.innerText = this.refs.input.value
    }
    render () {
        return (
            <div>
            	// 通过 ref 对标签进行引用
                <input ref="input" type="text" onChange={this.handleChange}/>
                <p ref="p"></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

回调 ref

• 传入内联回调，在更新时，该内联回调会调用两次
• 第一次，接收到的参数为 null，是为了清空状态
• 第二次，接收到的参数为绑定的标签

class Demo extends React.Component {
    handleChange = () => {
    	// 在组件实例上访问
        this.p.innerText = this.input.value
    }
    render () {
        return (
            <div>
            	// 传入一个回调函数，该函数被调用时第一个参数为所在标签
            	// 可以在回调函数体内，将所在标签挂在组件实例上
                <input ref={c => this.input = c} type="text" onChange={this.handleChange}/>
                <p ref={c => this.p = c}></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

• 传入非内联函数，在更新时，不会重复调用

class Demo extends React.Component {
    handleChange = () => {
    	// 在组件实例上访问
        this.p.innerText = this.input.value
    }
    bindInput = (c) => {
    	this.input = c
    }
    bindP = (c) => {
		this.p = c
	}
    render () {
        return (
            <div>
            	// 传入一个回调函数，该函数被调用时第一个参数为所在标签
            	// 可以在回调函数体内，将所在标签挂在组件实例上
                <input ref={this.bindInput} type="text" onChange={this.handleChange}/>
                <p ref={this.bindP}></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

标签：函数,render,标签,refs,笔记,React,input,handleChange,回调
来源： https://blog.csdn.net/TL18382950497/article/details/115395842