解决react中input框数据绑定的问题

 

在react框架中值是单向绑定的，导致input在使用this.state.xxx赋值的时候会显示值，但是在input中就不能输入值了，这个时候我们需要使用onChange方法，进行值的变更，具体实现如下：

<Input value={this.state.selectTotal} onChange={(e) => this.getTotalPlanQty(e)} size="defult"/>

方法：

/**
 * 获取总数量
 */
getTotalPlanQty(event) {
    let value = event.target.value;//值的存储地方
    this.setState({
        selectTotal: value,
    })
};

那如果是一个对象中多个值的input要怎么处理呢？

this.state={

currRowData:{
  totalPlanQty:0,
  receiptModel:""
}

}

类似这种的可以设置一个公共方法处理：

<Col span={6}>
    <span>总数量：</span>
    <Input value={this.state.currRowData.totalPlanQty}
           onChange={(e) => this.inputDataChange(e, 'totalPlanQty')} size="defult"/>
</Col>
<Col span={6}>
    <span>收货模式：</span>
    <Input value={this.state.currRowData.receiptModel}
           onChange={(e) => this.inputDataChange(e, 'receiptModel')} size="defult"/>
</Col>

/**
 * input 修改方法
 * @param event
 */
inputDataChange(event, field) {
    let value = event.target.value;
    let currentRow = this.state.currRowData;
    this.setState({
        currRowData: {
            ...currentRow, //拷贝当前对象
            [field]: value,//修改你要改的当前对象的那个属性值
        }
    });
}

类似这样设置就可以动态改变input的值了。