React如何動態綁定input框的值

最近公司的項目選擇了react做爲前端開發技術框架，做爲一名vue的忠實粉絲也不得不硬着頭皮上了，畢竟要吃飯。只能一邊學習一邊開發了，今天踩的坑是 input輸入框動態綁定數據後不能輸入。查閱了一番終於瞭解了，先上代碼

import React, {Component, Fragment} from "react";  // 首先仍是引入須要使用的組件

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>    
        )  
    }
}    
//這即是我動態綁定的數據，然而input框依然不能輸入任何數據
                        

幾經折騰發現React的數據綁定不是這個簡單的，還須要添加監聽時間才行，因而便繼續寫

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

// 這裏使用了onChange事件去監聽this.input_change,而且經過 .bind(this)將constructor傳入到咱們的方法中

接下來在render後面繼續寫咱們的監聽方法去綁定數據

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

到這裏咱們就能夠爲所欲爲的在input框中輸入代碼了

完整代碼以下

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>這是一個待完成事項</li>
                    <li>這是一個待完成事項</li>
                </ol>
            </Fragment>
        )
    };
    input_change(e){
        this.setState({
            input_value:e.target.value
        })
    }
}

export default Fire