Как обрабатывать форму множественного выбора в ReactJS

Question

Я пытаюсь обработать вариант выбора нескольких форм в ReactJS. Я пытался вдохновиться классическим кодом JavaScript, чтобы справиться с этим, но у меня ничего не получается.

Мой код просто не отправляет мне выбранные значения. Как справиться с этим?

Вот мой код:

  class ChooseYourCharacter extends React.Component {

      constructor(props) {
        super(props);
        this.state = {value: 'coconut'};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.option});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick your favorite La Croix flavor:
              <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )

Answer 1

В настоящее время изучаю React, и я заметил этот же код на сайте reactjs.org . Ниже мое решение для обработки нескольких выбранных опций.

1. в конструкторе используйте массив для начального значения для 'value' в состоянии
2. в методе handleChange преобразуйте объект selectedOptions цели события (HTMLOptionsCollection - array-like) в массив с помощью Array.from () и используйте функцию отображения для получения значения из каждого элемента

class ChooseYourCharacter extends React.Component {

      constructor(props) {
        super(props);
        //this.state = {value: 'coconut'};
        this.state = {value: ['coconut']};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        //this.setState({value: event.option});
        this.setState({value: Array.from(event.target.selectedOptions, (item) => item.value)});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick your favorite La Croix flavor:
              <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Насколько я понимаю, когда вы пытаетесь обработать Выберите элемент формы вactJS, вы генерируете объект в HTMLOptionsCollection.

Фундаментальный корень методов и свойств этого объекта: e.target.options .

Ваши товары хранятся в свойстве e.target.options.value.

Чтобы получить доступ к значению, хранящемуся в объекте options.value, вы можете использовать значение цикла [i], следовательно, свойство e.target.options [i] .value.

e.target.options [i] .value возвращает типы данных строк.

После того, что я только что сказал, я предполагаю, что объекты хранятся в соответствии с соглашением об увеличении числа следующим образом:

e.target.options [i] .value где {[i]: значение, [i +1]: значение (...)} ...

Используя e.target.options [i] .selected, вы можете контролировать наличие значения в определенном месте.

e.target.options [i] .selected возвращает логическое значение, полезное для обработки потока кода.

Теперь вам решать.

---

Здесь мой код для обработки формы множественного выбора в JSX с кодом javascript:

// Create the React Component


    class ChooseYourCharacter extends React.Component {

          // Set the constructor
          constructor(props) {
            super(props);
            this.state = {value: 'coconut'};

            // bind the functions
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }

            // extract the value to fluently setState the DOM
            handleChange (e) {

          var options = e.target.options;
          var value = [];
                  for (var i = 0, l = options.length; i < l; i++) {
                    if (options[i].selected) {
                      value.push(options[i].value);
                    }
                  }
            this.setState({value: value});
        }

          // display in client-side the values choosen
          handleSubmit() {
             alert("you have choose :" + this.state.value);

         }


    (...)