How to use React Refs

how-to-use-react-refs.markdown

How to use React Refs

A Pen by harikrishnan on CodePen.

License.

index.html

<div id="root">
</div>

script.babel

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"));

scripts

<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>