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

javascript html reactjs events onchange

2717 观看

3回复

4918 作者的声誉

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.

作者: Vishal Gulati 的来源 发布者: 2017 年 9 月 15 日

回应 3


0

4286 作者的声誉

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

作者: Adeel Imran 发布者: 2017 年 9 月 19 日

10

4917 作者的声誉

决定

This is trick, but if you need to fire function with the all changes, even with change of the same option, only one solution I know - use onClick and its detail:

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/

作者: Andrew 发布者: 2017 年 9 月 20 日

0

899 作者的声誉

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>

作者: karthik 发布者: 2017 年 9 月 20 日
32x32