<script type="text/babel">
class Demo extends React.Component {
render(){
return (
<div>
<input type='text' ref={c=>this.input1 =c}/>
<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;
}
网友评论