javascript - 如何在 React 中分隔输入字段值？

Question

我有一个根据数组中的项目数生成的输入列表:

const itemInputs = items.map(
  item => <Input key={item} value={itemInput} onChange={event => this.updateItem(event)} />,
);

这是我的 updateItem 函数的样子:

  updateItem(event) {
    this.setState({
      itemInput: event.target.value,
    });
  }

因此，如果我的数组中有两项，则会生成两个输入字段，如下所示:

但是当我为第一个输入字段输入一个值时，相同的值会出现在第二个输入字段中，如下所示:

如何防止这种情况发生？我希望每个输入字段保留自己的值。

Answer 1

这是一种方法

const items = ['firstName', 'lastName'];

const itemInputs = items.map(
  name => <Input key={name} name={name} value={this.state[name]} onChange={event => this.updateItem(name, event)} />,
);

updateItem = (name, event) => {
  this.setState({ [name]: event.target.value });
}