更改reactjs中动态输入字段的值

Posted 2021-03-28

我正在尝试更改动态添加的输入字段上的输入值。

每个输入字段值设置为由数组组成的状态值。

似乎应该为此提供一个简单的解决方案。但是我不能仅仅解决这个问题。

JSfiddle：https://jsfiddle.net/o51Lkvm6/1/

handleInputChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
}

    render()  {
        return (
            <div>
                { this.state.data.map((d, index) =>
                    <input name={d.Name} type="text" className="form-control" 
                  value={d.Name} onChange={this.handleInputChange} />
                 )}
            </div>
        );
    }

更新：是否可以不必使用defaultvalue来解决此问题？由于React不建议使用“不受控制的组件”？

答案

首先，您的代码有几个问题：

• 您忘记绑定处理程序方法或使用箭头功能保留此类的上下文。要解决这个问题，您可以把这个在测试构造函数中：

this.handleInputChange = this.handleInputChange.bind(this)

或将现有功能修改为：

  handleInputChange = e => {};

• 在输入值中，您实际上应该使用对应于状态中的当前项目，例如：

value={this.state.data[index]["Name"]}

• 稍后您必须以某种方式访问​​stateData中的适当项目将该索引存储在输入中。我通过将其分配给数据索引属性。您也忘了包括关键道具：

 <input
   key={d.ID}
   data-index={index}
   name={d.Name}
   type="text"
   className="form-control"
   value={this.state.data[index]["Name"]}
   onChange={this.handleInputChange}
  />

• 在您实际的handleInputChange中，您没有定位正确的事情。您需要首先从数组中获取适当的项目，然后然后修改名称。我是通过复制实际状态并稍后完成的分配它：

  handleInputChange = e => {
    const stateDataCopy = this.state.data.slice();
    stateDataCopy[e.target.dataset.index]["Name"] = e.target.value;
    this.setState({ data: stateDataCopy });
  };

• 在这里您可以找到工作示例：

另一答案

好的，我为您修复了

做这两件事

[handleInputChange(e){使其成为箭头功能，因此它具有this的概念，如下所示：handleInputChange = (e) => {

并在输入中使用defaultValue而不是value

为您更新的小提琴：https://jsfiddle.net/a17gywvp/1/