createRef

Input

by Allie Yu

HTML

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>

<!-- ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

<!-- ReactRedux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>

JavaScript

//https://codepen.io/AllieY/pen/aPbGyL

class App extends React.Component{
	constructor(props){
  	super(props)
    
    this.textInput = React.createRef();
    this.state = { value : ''}
  }
  
  handleSubmit = e => {
  	e.preventDefault();
    this.setState({value:this.textInput.current.value})
  };
  
  render(){
  	return(
    	<div>
        <h1>React Ref - createRef</h1>
    	  <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubimt}>
          <input type="text" ref={this.textInput}/>
          <button>Submit</button>
        </form>
    	</div>
    );
  }
}

ReactDOM.render(<App />, documnet.getElementById("root"));