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

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

当前代码：

<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绑定单击事件与选项元素，但需要在React中的解决方案。不要只包含jQuery只有这个要求。

来源

2017-09-15 Vishal Gulati

反应，如果你想它的角度结合的反应，请删除角标签/ - 在角度化妆用'ngModel'和使用'的（ngModelChanges）' –

https：//开头计算器。 com/questions/22482842/the-onclick-event-does-not-work-for-options我不认为如果单击选定的选项，就没有办法获取事件。另见https://stackoverflow.com/questions/16513638/how-to-receive-an-event-when-selected-option-is-the-already-selected-option-of-a –

@GünterZöchbauer谢谢你。我知道有使用jquery的解决方案，但在React中需要一个解决方案。不要只包含jQuery只有这个要求。 –

这是诡计，但如果你需要消防功能与所有的变化，即使是相同的选项的变化，只有一个解决方案，我知道 - 使用的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/

来源

2017-09-20 00:42:06 Andrew

e.detail === 0是什么意思？ –

细节用于传递附加事件数据。在正常的点击/鼠标事件时，它会发送点击数（在dbclick上为2）。当您在'select'中选择一个选项时，'e.detail'始终为0，因为没有其他数据要发送，就像通常的鼠标事件一样（您不能通过dbclick'option'） – AVAVT

@AVAVT，谢谢：） – Andrew

您可以通过使用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顾名思义只会当select以前的值不等于提供给它的新价值解雇提供的onClick事件实现这一目标。但在你的情况下，因为即使选择了相同的值，也要触发更改事件。您需要使用onClick方法，正如我在上面的代码中所演示的那样。每次点击选择标签时都会触发。

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

来源

2017-09-19 07:14:29

对不起，但有一个缺点..只要你点击选择下拉，onClick将被解雇。在选择一个选项时，这个点击事件再次被激发。而且，当您更改选项2时，一起开启事件，请点击并更改。 –

您可以删除onChange方法，上面的代码就是一个演示。您应该使用onChange或onClick。大多数情况下，我们应该使用onChange，但在你的情况下，你应该使用onClick。 –

但是，只要您点击选择下拉菜单，这将不会有所帮助，因此onClick将被解雇。在选择一个选项时，这个点击事件再次被激发。 –

希望这将解决您的问题，因为我们没有在javascript中默认的任何东西。只是一个解决办法。最好不要这样做，数学更好，你每次点击都会触发回调。

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>

来源

2017-09-20 12:30:01 karthik

回答

相关问题