即使從選擇下拉列表中選擇了相同的選項，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

回答

相關問題