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

原文地址：https://www.cnblogs.com/yang656/p/11110588.html