我有两个使用ref callback attribute. 第一个 on 引用了回调函数。第二个有一个箭头函数声明为值。
第一个按预期工作。但是，第二个记录null连续渲染。
这是什么原因？
开始在输入框内输入
示例 1（这工作正常）
class App extends React.Component{
constructor(props){
super(props)
this.refCallback = this.refCallback.bind(this)
this.state = {}
}
refCallback(el){
console.log(el)
}
render(){
return <input type="text"
value={this.state.value}
ref={this.refCallback}
onChange={(e) => this.setState({value: e.target.value})}
/>
}
}
ReactDOM.render(<App/>, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>示例 2（这不起作用）
class App extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
return <input type="text"
value={this.state.value}
ref={(el) => console.log(el)}
onChange={(e) => this.setState({value: e.target.value})}
/>
}
}
ReactDOM.render(<App/>, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>