即使从select下拉列表中选择相同的选项，也会发生ReactJS触发器事件。
即使从select下拉列表中选择相同的选项，也会发生ReactJS触发器事件。
提问于 2017-09-15 05:42:09
在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，但需要在React中找到解决方案。不想只为这个要求包括jQuery。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-20 00:42:06
这是一个技巧，但是如果您需要启动所有更改，即使更改了相同的选项，我只知道一种解决方案--使用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>
)
}
}Stack Overflow用户
发布于 2017-09-20 12:30:01
希望这将解决您的问题，因为我们没有任何由bydefault在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>
Stack Overflow用户
发布于 2017-09-19 07:14:29
您可以通过使用由onClick提供的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方法。这将触发每次单击选择标签。
我希望这能帮到你。干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46232402
复制相关文章
相似问题
腾讯云开发者
