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, Feb 20 '18 at 09:13
I mean after selecting multiple values. Any event handlers there for doing this? — Hareesh, Feb 20 '18 at 09:22
what do you mean by 'selecting the multiple values' in a dropdown? — izengod, Feb 20 '18 at 09:22
I believe you are looking for -> `e.target.selectedOptions` not a value — The Reason, Feb 20 '18 at 09:41
@shaedrich, @The Reason, I was trying to get array of selected values in console. I tried with `e.target.selectedValues` but gives undefined. — Hareesh, Feb 20 '18 at 09:56
It seems that js doesn't offer such a property although I think, it would be pretty good to have one. Then maybe some of these solutions might help you: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box — shaedrich, Feb 20 '18 at 10:00
It actually has something like this. If you do not care about IE, you could use the `selectedOptions` property. — shaedrich, Feb 20 '18 at 10:06

score 1 · Answer 1 · answered Feb 20 '18 at 09:19

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 '18 at 09:19

Daniel Thompson

2,193
4
23
37

This is how I'd do it! – 3Dos Feb 20 '18 at 09:19

score 0 · Answer 2 · answered Feb 20 '18 at 09:38

0

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

answered Feb 20 '18 at 09:38

shaedrich

5,457
3
26
42

score 0 · Answer 3 · answered Feb 20 '18 at 10:42

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

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

3 Answers3