React中ref的用法

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在React数据流中，父子组件唯一的通信方式是通过props属性；那么如果有些场景需要获取某一个真实的DOM元素来交互，这时候就要用到React的refs属性。

1、可以给DOM元素添加ref属性

class TestApp extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();
        console.log(`姓名：${this.nameInput.value}`);
        console.log(`学校：${ReactDOM.findDOMNode(this.refs.schoolInput).value}`);
    }
    render(){
        return(
            <form>
                <input type="text" ref={(nameInput) => {nameInput.focus();this.nameInput = nameInput}}/><br></br>
                <input type="text" ref="schoolInput"/><br></br>
                <button onClick={this.handleSubmit}>提交</button>
            </form>
        )
    };
}

上面例子实现了两种方式，通过ref来获取真实DOM元素。因为第二个文本框本身为真实dom元素，也可以通过this.refs.schoolInput.value来获取值。

ref可以设置字符串，也可以设置回调函数（推荐）。

  • 组件被挂载后，回调函数立即执行，回调函数的参数为该组件的具体事例。

  • 组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

以上是 React中ref的用法 的全部内容， 来源链接： utcz.com/z/381093.html

回到顶部