I've two examples using the ref callback attribute
. The first on has a reference to the callback function. The second one has an arrow function declared as the value.
The first works as expected. But, the second one log a null
on consecutive renders.
What is the reason for this?
Start typing inside the input box
Example 1(this works fine)
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>
See Question&Answers more detail:os