How to React dynamic binding input box value

Recently the company chose to react as the project front-end development technology framework, as a big fan of vue also had to bite the bullet on, after all, to eat. Can only learn as developed today stepped pit is input after the input box dynamic binding data can not be entered. Read a lot finally understand, first on the code

import React, {Component, Fragment} from "react"; // first component is introduced into the need to use

class Fire extends Component {
   constructor(props) {
      super(props);
      this.state = {
          input_value:'',
        }    
    }
    rander(){
      return(
          <Fragment>
               <div>
                   <input  type='text' value={this.state.input_value}     
                      className='input' />
                    <button className='add'>新增<button>   
               </div>
          <Fragment>    
        )  
    }
}    
// This is the data I have dynamic binding, but still can not enter any input box data
                        

After a frustrating discovery React data binding is not this simple, but also need to add a listener time job, so he continued to write

<INPUT type = "text" value = { the this .state.input_value} = {onChange the this .input_change.bind ( the this )} className = 'INPUT' /> 

// onChange event is used here to monitor this.input_change, and by .bind (this) will be passed to the constructor our approach

Next to continue to write our listeners in the back render method to bind data

input_change(e){
   this.setState({
       input_value:e.target.value
    })
}

Here we can be arbitrary in the input box, enter the code

The complete code is as follows

import React, {Component, Fragment} from "react";

class Fire extends Component {
    constructor(props){
        super(props);
        this.state={
            input_value:'',
            list:[],
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    <input type="text" value={this.state.input_value} onChange={this.input_change.bind(this)} className='input'/>
                    <button className='add'>新增</button>
                </div>
                <OL className = 'List'> 
                    <Li> which is a to-do </ Li> 
                    <Li> which is a to-do </ Li> 
                </ OL> 
            </ Fragment>         ) 
    }; 
    input_change (E) { the this .setState ({ 
            input_value in: e.target.value 
        }) 
    } 
} 
Export default Fire