如何处理onChange ReactJs？内部细节无法解释

Question

嗨，我在react用户输入文本时遇到了一个问题。我有一个项目列表和一个输入文本。当我在第一个输入框中输入时，所有的输入框都会发生变化。如何处理这件事。

示例代码

handleEditChange(event) {
        event.preventDefault();
        console.log(event.target.name)
        console.log(event.target.value)
        this.setState({
            [event.target.name]: event.target.value
        });
    };


{items.map(item=> (
  <input type="text" class="form-control bg-light" placeholder="Reply" name="reply" value= 
  {this.state.reply} onChange={this.handleChange} />
))}

因此，输入框将根据循环进行重复，例如，它将是3个输入框。图片样本

​

​

我如何防止这种情况发生？感谢你的帮助

Answer 1

你能使用<input ... name={item.name} value={this.state[item.name]}>或类似的东西吗？

Answer 2

您需要为每个输入值使用单独的状态变量。您当前正在遍历您的项目，并为每个项目呈现相同的输入，相同的值为this.state.reply。

根据您附加的图片，您可以将每个输入包装在一个Discussion组件中，该组件一次只处理一个输入。