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

Question

I have a list of inputs that are generated based on the number of items in an array:

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

Here is what my updateItem function looks like:

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

So if there are two items in my array, then two input fields will be generated, like so:

But when I enter a value for the first input field, that same value appears in the second input field, like so:

How can I prevent this from happening? I want each input field to retain its own value.

Answer 1

Here is one way to do that

 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

Well, I assume you are putting all the inputs in one component. And component can have only 1 state.

In other words, you are changing the value of itemInput , and it effects all inputs because ypu declared that their value would be itemInput of the same component of all.

What you can do is make a new component for input, and call it instead. That way you will have state for every single input.

Hope that helps. Good luck