J'utilise et J'implémente un menu déroulant dans ma page Web de réaction. Dans mon menu déroulant, j'appelle une fonction handleClick lorsque le bouton est sélectionné.

<Dropdown.Menu>
    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>
    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>
    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>
    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>
</Dropdown.Menu>

Voici ma fonction handleClick :

handleClick = (eventkey, event) => {
  console.log(eventkey)
  console.log(event)
}

Cependant, le event.target est nul, ci-dessous le console.log de mon navigateur client :

Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: ƒ, …}
nativeEvent: (...)
type: (...)
target: null

J'ai essayé de lier et de ne pas lier la fonction dans le constructeur, mais les deux ont produit des valeurs nulles pour event.target

this.handleClick = this.handleClick.bind(this);

Qu'est-ce que je fais de mal ici ? Toute forme de clarification de concept serait grandement appréciée!

2
Dustyik 5 févr. 2020 à 18:22

1 réponse

Meilleure réponse

Vous avez quelques options.

  1. React lance un avertissement lors de la tentative d'accès à l'événement

Attention : Cet événement synthétique est réutilisé pour des raisons de performances. Si vous voyez cela, vous accédez à la propriété nativeEvent sur un événement synthétique publié/annulé. Ceci est défini sur null. Si vous devez conserver l'événement synthétique d'origine, utilisez event.persist(). Voir ... pour plus d'informations.

Ainsi, pour accéder à l'événement d'origine, vous devez appeler event.persist() avant d'accéder à l'événement.

Comme ça:

handleClick = (eventkey, event) => {
  event.persist();
  console.log(eventkey)
  console.log(event)
}
  1. Vous pouvez utiliser le eventkey pour passer la valeur
change = eventkey => {
  // a.persist();
  alert(`you chosen: ${eventkey}`);
};
<Dropdown onSelect={this.change}>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item eventKey="baudratestate1200">1200</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate2400">2400</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate4800">4800</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate9600">9600</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-r7n0f

  1. Appelez la fonction avec le paramètre codé en dur
change = option => {
  alert(`you chosen: ${option}`);
};
<Dropdown.Item onSelect={()=> this.change("baudratestate1200")}> 1200
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate2400")}> 2400
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate4800")}> 4800
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate9600")}> 9600
</Dropdown.Item>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-6gknv

1
Mosh Feu 5 févr. 2020 à 19:23