ReactJS - 即使从选择下拉列表中选择了相同的选项，也会触发事件答案

【问题标题】：ReactJS - trigger event even if the same option is selected from select dropdownReactJS - 即使从选择下拉列表中选择了相同的选项，也会触发事件
【发布时间】：2018-02-24 05:20:58
【问题描述】：

当从 ReactJS 的下拉列表中选择一个选项时如何触发事件。目前我正在使用onChange，但即使再次选择相同的选项，我也需要触发一个事件。

当前代码：

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

我什至尝试将onClick 处理程序添加到选项，但单击选项时不会触发，因为它仅适用于元素。

我知道有使用 jquery 的解决方案，通过将 click 事件与 option 元素绑定，但需要 React 中的解决方案。不想仅仅为了这个要求而包含 jQuery。

【问题讨论】：

react 和 angular 结合，如果你想反应，请删除 angular 标签/在 angular 中使用 ngModel 并使用 (ngModelChanges)
stackoverflow.com/questions/22482842/… 我认为如果单击所选选项，则无法获取事件。另见stackoverflow.com/questions/16513638/…
@GünterZöchbauer 谢谢。我知道有使用 jquery 的解决方案，但需要 React 中的解决方案。不想仅出于此要求而包含 jQuery。
jQuery中有哪些解决方案。如果 jQuery 可以做到，那么 react 也应该有解决方案。我不知道为什么这个问题出现在我的信息流中，我不知道反应。嗯，我明白了。它以前有角度标签。
在 jQuery 中我们可以绑定一个带有选项的点击事件。

标签： javascript html reactjs events onchange

【解决方案1】：

希望这能解决您的问题，因为我们在 javascript 中默认没有任何内容。只是一个解决方法。最好不要在每次触发 onclick 时调用回调。

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>

【讨论】：

【解决方案2】：

这是技巧，但如果您需要在所有更改中触发函数，即使更改相同选项，我只知道一个解决方案 - 使用 onClick 及其详细信息：

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/

【讨论】：

e.detail === 0 象征什么？
detail 用于传递额外的事件数据。在正常的点击/鼠标事件中，它会发送点击次数（dbclick 为 2）。当您在select 中选择一个选项时，e.detail 始终为 0，因为在通常的鼠标事件的情况下没有额外的数据要发送（您不能 dbclick 一个 option）
谢谢.. @AVT
很遗憾detail 不受 IE11 支持 stackoverflow.com/questions/55903854/…

【解决方案3】：

你可以通过使用 ReactJS 提供的 onClick 事件来实现这一点

<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 顾名思义，只会在select 的先前值不等于提供给它的新值时触发。但是在您的情况下，即使选择了相同的值，您也想触发更改事件。您需要使用我在上面的代码中演示的onClick 方法。每次点击选择标签时都会触发。

我希望这会有所帮助。干杯

【讨论】：

抱歉，这有一个缺陷。一旦你点击选择下拉菜单，onClick 就会被触发。并在选择一个选项时，再次触发此单击事件。此外，当您更改选项 2 事件一起触发时，单击并更改。
可以去掉onChange方法，上面的代码是作为演示的。您应该使用 onChange 或 onClick。大多数情况下，我们应该使用 onChange，但在您的情况下，您应该使用 onClick。
但这也无济于事，因为一旦您单击选择下拉菜单，onClick 就会被触发。并在选择一个选项时，再次触发此点击事件。
这是您可以使用的唯一可能的解决方案，您可以使用的另一个用例是在每个选项标签上添加一个 onClick 事件。并从您的选择标签中删除 onChange/onClick 方法。但这只有在选项是静态而不是动态的情况下才可行，即不是来自数据库。
您不能将 onClick 与选项绑定。任何浏览器都不支持它。