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

Насколько я понимаю, когда вы пытаетесь обработать Выбрать элемент формы в reactJS, вы генерируете объект в 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.handleChangeEvent = this.handleChangeEvent.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }

          // extract the value to fluently setState the DOM
          handleChangeEvent (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);

         }


    (...)

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

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

class ChooseYourCharacter extends React.Component {

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

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

      handleChangeEvent(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.handleChangeEvent}>
                <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>

Поскольку вы используете множественный выбор, вы должны объявить свою переменную состояния как массив

  constructor(props) {
    super(props);
    this.state = {value: []};//This should be an array

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

Я создал блог для публикации формы responsejs с управлением множественным выбором. Вы можете перейти сюда для получения более подробной информации https://handyopinion.com/git-commands-cheat-sheet/

Вот как получить параметры, выбранные пользователем, с помощью функционального компонента и ловушки useState, а не компонента класса:

import React, { useState } from "react";

const ChooseYourCharacter = function(props) {
    const [selectedFlavors, setSelectedFlavors] = useState([]);

    const handleSelect = function(selectedItems) {
        const flavors = [];
        for (let i=0; i<selectedItems.length; i++) {
            flavors.push(selectedItems[i].value);
        }
        setSelectedFlavors(flavors);
    }

    return (
        <form>
            <select multiple = {true} value = {selectedFlavors} onChange = {(e)=> {handleSelect(e.target.selectedOptions)}}>
                <option value = "grapefruit">Grapefruit</option>
                <option value = "lime">Lime</option>
                <option value = "coconut">Coconut</option>
                <option value = "mango">Mango</option>
            </select>
        </form>
    );
};

export default ChooseYourCharacter;

Я использую здесь реакцию bootstrap 4

   <Form.Group >
          <Form.Label>Form Label</Form.Label>
          <Form.Control
            as = "select"
            multiple
            // value = {formCatState}
            onChange = {(event) => {
              let target = event.target as HTMLSelectElement
              console.info(target.selectedOptions);
            }}
          >
            <option>example cat 1</option>
            <option>Example cat 2</option>
            <option>Example cat 3</option>
            <option>Example cat 4</option>
          </Form.Control>
            <Form.Text muted> hold ctrl or command for multiple select</Form.Text>
        </Form.Group>