Question

77

How handle multiple select form in ReactJS

rated 0 times [ 82] [ 5] / answers: 1 / hits: 53115 / 6 Years ago, sun, april 29, 2018, 12:00:00

I try to handle a multiple form select option, in ReactJS. I have tried to be inspire of javascript classic code to handle that, but I fail.

My code just don't send me the values selected. How handle that ?

Here my code :

  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')

    )

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

joanneamiyaa

Add To Favorites

Follow

Total Points: 532

Total Questions: 127

Total Answers: 98

Location: Guam

Member since Tue, Nov 3, 2020

4 Years ago

answered 6 Years ago myakylas · Accepted Answer

Of my basic understanding, when you try to handle a Select form element in reactJS you generates an object in HTMLOptionsCollection.

The fundamental root to this object methods and properties is e.target.options.

Your items are stored in e.target.options.value property.

To access to a value stored in the options.value object, you can use the [i] loop value, hence e.target.options[i].value property.

The e.target.options[i].value return strings data types.

Following what I have just said, I assume the objects are stored respecting a number increasing convention as following :

e.target.options[i].value where { [i] : value, [i +1] : value (...)}...

By using e.target.options[i].selected you can control if there is a value stored at a specific location.

e.target.options[i].selected return you a boolean value, useful to handle the code flow.

It's up to you now.

Here my code to handle multiple select form in JSX with javascript code :

// 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);



         }





    (...)