Как разделить значения поля ввода в 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 того же компонента всех.

Что вы можете сделать, это сделать новый компонент для ввода и вызвать его вместо этого.Таким образом, у вас будет состояние для каждого входа.

Надеюсь, это поможет.Удачи