reactjs - 如何在reactjs中创建具有唯一名称属性的重复输入元素

Question

我想创建一个重复的输入元素，如下所示

<input
  type="text"
  className="form-control mb-3"
  id="whatweoffer"
  name="whatweoffer"
  value={this.state.whatweoffer}
  onChange={this.handleChange}
  placeholder="what we offer"
  required
/>;

但它应该有一个不同的名称属性，并且必须使用该值来设置状态

handleChange = e => {
  this.setState({ [e.target.name]: e.target.value });
};

有人能帮我吗？

标签： reactjs

Answer 1

创建一个包含输入属性的对象数组，并将其设置为状态。

this.state = {
  inputs: [
    {
      name: 'whatweoffer_name',
      value: 'whatweoffer_value',
      placeholder: 'whatweoffer_placeholder'
    },
    {
      name: 'whatweoffer_2_name',
      value: 'whatweoffer_2_value',
      placeholder: 'whatweoffer_2_placeholder'
    }
  ]
}

并在中使用相同的render()：

render() {
  return(

    {this.state.inputs.map(input => (
      <input
      type="text"
      className="form-control mb-3"
      id={input.name}
      name={input.name}
      value={input.value}
      onChange={this.handleChange}
      placeholder={input.placeholder}
      required
    />;
    ))}

  )
}

然后你handleChange变成这样：

handleChange = e => {
  // Fetch the name and value of the input that fired the method
  const {name, value} = e.target 

  this.setState(prevState => {
    // Take copy of the input list
    let {inputs} = prevState
    // Find the index of the object in the input list to be updated
    const inputIndex = inputs.findIndex(input => input.name === name)
    // Update the item
    inputs[inputIndex].value = value

    return { inputs }
  });
};