Javascript 具有多个值的动态反应形式

我正在尝试创建一个动态响应表单，用户可以从下拉菜单中选择多个值，然后保存这些值。我设法找到了这个例子，但是实现和添加属性multiple似乎不起作用。有什么想法吗？谢谢

预期结果：用户应该能够选择多个值，如项目A和项目B。然后，他们可以添加另一个选择选项，但这次选择项目B，例如，保留最后设置的值

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  createUI() {
    return this.state.values.map((el, i) => (
      <div key={i}>
        <select
          multiple={true}
          value={el || ""}
          onChange={this.handleChange.bind(this, i)}
        >
          <option value="">Select</option>
          <option value="10">Item A</option>
          <option value="20">Item B</option>
        </select>{" "}
        <input
          type="button"
          value="remove"
          onClick={this.removeClick.bind(this, i)}
        />
      </div>
    ));
  }

  handleChange(i, event) {
    let values = [...this.state.values];
    values[i] = event.target.value;
    this.setState({ values });
  }

  addClick() {
    this.setState((prevState) => ({ values: [...prevState.values, ""] }));
  }

  removeClick(i) {
    let values = [...this.state.values];
    values.splice(i, 1);
    this.setState({ values });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.values.join(", "));
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {this.createUI()}
        <input
          type="button"
          value="add more"
          onClick={this.addClick.bind(this)}
        />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

---

您需要保存选择，并在“值”属性中传递所选值选项

工作示例-

代码-

---

您需要保存选择，并在“值”属性中传递所选值选项

工作示例-

代码-

---

我看到的唯一问题是设置为选择的倍数值。只需在将数组作为值属性传递时将其设置为true。但你没有这么做。因此，删除multiple={true}就可以开始了

你的方法似乎很好。最后，例如，当用户选择A、select、B时，this.state.values将记录[10,20]

---

注：如果您是一名新的React开发人员，并且项目是新的，我强烈建议您使用并摆脱所有这些，绑定和类组件。

我看到的唯一问题是您设置为选择的多个值。只需在将数组作为值属性传递时将其设置为true。但你没有这么做。因此，删除multiple={true}就可以开始了

你的方法似乎很好。最后，例如，当用户选择A、select、B时，this.state.values将记录[10,20]

---

注：如果您是一名新的React开发人员，并且项目是新的，我强烈建议您使用并摆脱所有这些，绑定和类组件。

如果我理解正确，您希望每个选择框的每个选择都是独立的，并且应该能够作为一个整体提交

可以使用选定值的数组更新handleChange方法

  handleChange(i, event) {
    let values = [...this.state.values];

    // change
    values[i] = Array.from(
      event.target.selectedOptions,
      (option) => option.value
    );

    this.setState({ values });
  }

---

如果我理解正确，您可以按照此代码链接进行操作，您希望对每个选择框进行独立的选择，并且应该能够整体提交

可以使用选定值的数组更新handleChange方法

  handleChange(i, event) {
    let values = [...this.state.values];

    // change
    values[i] = Array.from(
      event.target.selectedOptions,
      (option) => option.value
    );

    this.setState({ values });
  }

---

您可以遵循此代码链接

更改每个选项的值。我试图得到它，如果你在第一个选项中选择A和B项，然后在第二个选项中选择B项，那么这两个值都会被存储。这似乎会更改所有选项的值。Thanks@user14649590：您需要为此修改值数组，我的示例是针对单个多重选择，使用此u可以进一步扩展。这会更改每个选项的值。我试图得到它，如果你在第一个选项中选择A和B项，然后在第二个选项中选择B项，那么这两个值都会被存储。这似乎会更改所有选项的值。Thanks@user14649590：您需要为此修改值数组，我的示例是针对单个多重选择，使用此u可以进一步扩展它。