According to react docs , refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application i.e. refs would return the node we are referencing .
Following code without ref
class App extends React.Component{
constructor(){
super();
this.state = {sayings:e.target.value}
}
update(e){
this.setState({sayings:e.target.value});
}
render(){
return (
<div>
Nancy says <input type="text" onChange={this.update.bind(this)}/>
{this.state.sayings}
</div>
)
}
}
export default App;
same functionality can be done using ref
class App extends React.Component{
constructor(){
super();
this.state = {sayings:e.target.value}
}
update(e){
this.setState({sayings:this.ref.talk.value});
}
render(){
return (
<div>
Nancy says <input type="text" ref="talk" onChange={this.update.bind(this)}/>
{this.state.sayings}
</div>
)
}
}
export default App;