ReactJS

Question

当从 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。

Answer 1

可以通过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 的前一个值不等于提供给它的新值时触发。但在你的情况下，因为你想要触发更改事件，即使相同的值是 selected。您需要使用我在上面的代码中演示的 onClick 方法。每次单击 select 标签时都会触发。

希望对您有所帮助。干杯

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

Answer 3

希望这能解决您的问题，因为我们在 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>

ReactJS - 即使从 select 下拉列表中 selected 相同的选项也会触发事件

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

html

javascript

events

onchange