Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use React Refs
<div id="root">
</div>
class Blocker extends React.Component{
constructor(props){
super(props);
this.state={value:null}
}
componentDidMount(){
this.name.value="hari"
this.name.oninput=this.handlechange.bind(this);
}
handlechange(event){
this.setState({value:event.target.value})
}
render(){
return(
<div>
{/*Attaching a ref the input DOM node*/}
<input ref={(input)=>this.name=input} type="text"/>
{this.state.value}
</div>
)
}
}
ReactDOM.render(<Blocker/>,document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/react-router-dom@4.0.0/umd/react-router-dom.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment