如何在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 });
}

Answer 2

好吧，我假设您将所有输入都放在一个组件中。而且组件只能具有1个状态。

换句话说，您正在更改itemInput的值，并且会影响所有输入，因为ypu声明它们的值将是所有相同分量的itemInput。

您可以做的是制作一个新的输入组件，然后调用它。 这样，您将获得每个输入的状态。

希望有帮助。 祝你好运