react学习(17)回调形式的ref

2022-08-18  本文已影响0人  哆啦C梦的百宝箱
<script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                    <div>
                        <input type='text' ref={c=>this.input1 =c}/>&nbsp;
                        <button onClick={this.showDemo}>点击显示内容</button>
                    </div>
                )
            }
            showDemo=()=>{
                alert(this.input1.value);
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'));
    </script>

1:首先回调函数是指:自己定义了一个函数,并且这个函数不是自己调用且执行了,ref的回调函数是react帮忙执行。其中c是当前标签节点,this.input1中的this是组件实例对象。那么this.input1 =c;的含义就是往组件实例对象身上添加一个input1属性,并且值为标签节点。
2:回调形式的ref回调执行次数:如果写成内联函数的形式,在更新页面的时候,函数会调用两次。如果写成class的绑定函数的形式,就不会出现这种情况。但是大多数情况这是无关紧要的。

<input type='text' ref={this.saveInput}/>
saveInput=(c)=>{
    this.input1 = c;
}
上一篇 下一篇

猜你喜欢

热点阅读