Блог

Я пытаюсь создать динамическую форму реагирования, в которой пользователи могут выбирать несколько значений из выпадающего меню, которое затем сохраняется. Мне удалось найти этот пример, однако реализация и добавление атрибута 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"));
  

Если я правильно понимаю, вы хотите сделать каждый выбор независимым для каждого поля выбора и должны иметь возможность отправлять его целиком.

вы можете обновить метод handleChange с помощью массива выбранного значения.

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

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

    this.setState({ values });
  }
  

вы можете, следуя этой ссылке на код CodeSandbox

Вам нужно сохранить выбранные значения Select и в value атрибуте, который вам нужно передать, параметры выбранного значения.

Рабочий пример — ссылка CodeSandbox

Код —

 handleChange(i, e) {
    let target = e.target;
    let name = target.name;
    let value = Array.from(target.selectedOptions, (option) => option.value);
    this.setState({
      [name]: value
    });
  }

  createUI() {
    return this.state.values.map((el, i) => (
      <div key={i}>
        <select
          name="selectOptions"
          multiple={true}
          value={this.state.selectOptions}
          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>
    ));
  }
  

Единственная проблема, которую я вижу, — это multiple значение, которое вы установили select . Вам нужно только установить его true , когда вы передаете array как value свойство. Но вы этого не делаете. Так что удалите multiple={true} , и все готово.

Ваш подход кажется прекрасным. В конце, когда, например, пользователь выбирает A, select, B, this.state.values будет регистрироваться ["10", "", "20"] .

P.S: Если вы новый разработчик React и проект новый, я настоятельно рекомендую вам использовать перехватчики реакции и избавиться от всех this bind компонентов и классов.