ReactJS - événement déclencheur même si la même option est sélectionnée dans la liste déroulante sélectionnée

Question

Comment déclencher un événement lorsqu'une option est sélectionnée dans une liste déroulante dans ReactJS. Actuellement j'utilise onChange mais je dois déclencher un événement même si la même option est sélectionnée à nouveau.

Code actuel:

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

J'ai même essayé d'ajouter à l'option gestionnaire onClick mais ne se déclenche pas, cliquez sur les options qu'il fonctionne uniquement avec les éléments.

Je sais qu'il existe des solutions utilisant jquery en liant un événement click avec un élément option, mais qui nécessitent une solution dans React. Ne voulez pas inclure jQuery pour cette seule exigence.

Answer 1

C'est truc, mais si vous avez besoin de fonctionner feu avec les tous les changements, même avec le changement de la même option, une seule solution que je sais - utiliser onClick et ses détails:

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 2

Vous pouvez le faire en utilisant l'événement onClick fourni par 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 comme son nom l'indique ne sera déclenché lorsque la valeur précédente de select ne correspond pas à la nouvelle valeur qui lui est fournie. Mais dans votre cas puisque vous voulez déclencher l'événement de changement même si la même valeur est sélectionnée. Vous devez utiliser la méthode onClick comme je l'ai démontré dans le code ci-dessus. Cela se déclenchera chaque fois que vous cliquerez sur select tag.

J'espère que cela aide. Vive

Answer 3

Espérons que cela va résoudre votre problème, car nous n'avons rien bydefault en javascript. Juste un travail autour. Il est préférable de ne pas faire ce calcul avec le callback à chaque fois que l'onclick est déclenché.

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>