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

Posted 2023-02-22

【中文标题】如何在 React 中分隔输入字段值？

【英文标题】：How to separate input field values in React?

【发布时间】：2019-09-30 22:44:52

【问题描述】：

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

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

这是我的 updateItem 函数的样子：

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

所以如果我的数组中有两个项目，那么将生成两个输入字段，如下所示：

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

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

【参考方案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 );

【参考方案2】：

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

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

您可以做的是为输入创建一个新组件，然后调用它。 这样，您将拥有每个输入的状态。

希望对您有所帮助。 祝你好运

【讨论】：

我明白了。好吧，您仍然将这些自定义组件传递给单个组件。这是 1 个州。