ReactJs How to handle event handler only after multiple selection of dropdown?

Question

I have the following code with multiple select dropdown list. The handle change calls on selecting each value from the dropdown. How can i change this to call the handleChange function only after selecting the multiple values?

handleChange(e) {
    console.log(e.target.value);
}

render() {

    return(
        <select className="form-control" key="1" name="degree" onChange={this.handleChange} multiple>
            <option value="1" key="1">1</option>
            <option value="2" key="2">2</option>
            <option value="3" key="3">3</option>
            <option value="4" key="4">4</option>
            <option value="5" key="5">5</option>
        </select>
        )
}

Update: I need to get the array of selected values in the console is my basic requirement.

how do you know when the required value is selected, as apposed to any other value in the list? — developer
– developer, Commented Feb 20, 2018 at 9:13
I mean after selecting multiple values. Any event handlers there for doing this? — Hareesh
– Hareesh, Commented Feb 20, 2018 at 9:22
what do you mean by 'selecting the multiple values' in a dropdown? — izengod
– izengod, Commented Feb 20, 2018 at 9:22
I believe you are looking for -> e.target.selectedOptions not a value — The Reason
– The Reason, Commented Feb 20, 2018 at 9:41

Daniel Thompson · Accepted Answer · 2018-02-20 09:19:14Z

1

You could always use a fast fail in your action handler

handleChange(e) {
    const requiredValues = [3, 5]
    if (!requiredValues.includes(e.target.value) return
    ...
}

answered Feb 20, 2018 at 9:19

Daniel Thompson

2,3514 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

3Dos Over a year ago

This is how I'd do it!

shaedrich · Accepted Answer · 2018-02-20 09:38:54Z

0

underscore provides a method called _.after(). This might suit your requirements.

answered Feb 20, 2018 at 9:38

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

Comments

Daniel Andrei · Accepted Answer · 2018-02-20 10:42:03Z

You could do your "select" handler logic after you have multiple values.

One example would be storing the selected values in state and the handler would look like this :

onChangeHandler = (e) => {
  this.setState({ values } => {
    const newValues = values;
    const currentValue = e.target.value;

    const index = values.indexOf(currentValue);

    if (index > -1) {
      // Remove value
      newValues.splice(index, 1);
    } else {
      // Add value
      newValues.push(currentValue);
    }

    // You can do your logic here, before state is updated
    // if (newValues.length > 1) {
    // do multiple values logic
    // }

    // Update state
    return {
      values: newValues
    }
  }, () => {
    // You can do your logic here, after state is updated
    // if (this.state.values.length > 1) {
    // do multiple values logic
    // }
  })
}

Collectives™ on Stack Overflow

ReactJs How to handle event handler only after multiple selection of dropdown?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related