美文网首页
react学习(17)回调形式的ref

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

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-08-18 15:47 被阅读0次
    <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;
    }
    

    相关文章

      网友评论

          本文标题:react学习(17)回调形式的ref

          本文链接:https://www.haomeiwen.com/subject/sxsjgrtx.html