CODEWITHSUNDEEP
javascripthtmlreactjseventsonchange
Manu
Manu

Reputation: 10934

ReactJS - trigger event even if the same option is selected from select dropdown

How do I fire an event when an option is selected from dropdown in ReactJS. Currently I am using onChange but I need to fire an event even if same option is selected again.

Current code: 

<select name="select1" onChange={this.onChangeOption}>
    <option value='A'>Please select A...</option>
    <option value='B'>Please select B...</option>
    <option value='C'>Please select C...</option>
    <option value='D'>Please select D...</option>
</select>

I even tried adding onClick handler to option but that does not fire on click over the options as it works only with elements.

I know there are solutions using jquery by binding click event with option element, but need a solution in React. Dont want to include jQuery for only this requirement.

Upvotes: 12

Views: 10279

Answers (3)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

This is a trick, but if you need to call the function on each change, even with the change of the same option, the only solution I know - use onClick and its details:

class Select extends React.Component{
    onChangeOption(e){
        if (e.detail === 0){
            console.log(e.target.value);
        }
    }
    render(){
        return (
            <select name="select1" onClick={this.onChangeOption}>
                <option value='A'>Please select A...</option>
                <option value='B'>Please select B...</option>
                <option value='C'>Please select C...</option>
                <option value='D'>Please select D...</option>
            </select>
        )
    }
}

https://jsfiddle.net/69z2wepo/86140/

Upvotes: 19

karthik
karthik

Reputation: 1098

Hope this will solve your issue since we dont have anything bydefault in javascript. Just a work around. Its better not to do that math with better u call the callback everytime onclick is triggered.

let a = 0; //temporary variable - not requred until its particular
let onChangeOption = ()=>{
a = a+1; //not requred until its particular
if(a%2 == 0){// not requred until its particular
console.log("triggered ")
}
}
<select name="select1"  onclick="onChangeOption()">
    <option value='A'>Please select A...</option>
    <option value='B'>Please select B...</option>
    <option value='C'>Please select C...</option>
    <option value='D'>Please select D...</option>
</select>

Upvotes: 0

Adeel Imran
Adeel Imran

Reputation: 13956

You can achieve this by using the onClick event provided by ReactJS

<select 
  name="select1"
  onChange={(e) => {
   // Do not use onChange method, for your use case
   console.log('event value', e.target.value);
   console.log('event name', e.target.name);
  }}
  onClick={(e) => {
    // Use onClick method, for your use case
    console.log('XX event value', e.target.value);
    console.log('XX event name', e.target.name);
  }}
>
  <option value='A'>Please select A...</option>
  <option value='B'>Please select B...</option>
  <option value='C'>Please select C...</option>
  <option value='D'>Please select D...</option>
</select>

onChange as the name suggests will only be fired when the previous value of select is not equal to the new value provided to it. But in your case since you want trigger the change event even if the same value is selected. You need to use the onClick method as I have demonstrated in the code above. This will fire every time you click on select tag.

I hope this helps. Cheers

Upvotes: 0

Related Questions