Comment obtenir la valeur sélectionnée d'un menu déroulant dans ReactJS

Je suis l'aide de réagir et je veux obtenir la valeur de l'option sélectionnée dans une liste déroulante à réagir, mais je ne sais pas comment. Toutes les suggestions? merci!
Ma liste déroulante est juste un select comme:

            <select id = "dropdown">
                <option value="N/A">N/A</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>

alert(dropdown.value)
note: je veux utiliser pour sélectionner et passer une valeur dans une méthode.
<select onchange=method(value)>, ou de l'utilisation la plus complexe off-side lier, ou partir en JS, method(drowdown.value)
Veuillez vous référer à ce lien skptricks.com/2018/05/create-dropdown-using-reactjs.html

InformationsquelleAutor BlueElixir | 2015-03-17

66

Le code dans le render méthode représente le composant à un moment donné.
Si vous ne quelque chose comme ceci, l'utilisateur ne sera pas en mesure de faire des sélections à l'aide du formulaire de contrôle:
```
<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>
```
Il y a donc deux solutions pour travailler avec les contrôles de formulaires:
1. Les Composants commandés d'Utiliser un composant de state afin de refléter les sélections de l'utilisateur. Cette offre le plus de contrôle, puisque toutes les modifications que vous apportez à state sera reflété dans le composant de rendu:
exemple:
```
var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);
```
JSFiddle: http://jsfiddle.net/xe5ypghv/
1. Incontrôlée des Composants L'autre option est de ne pas contrôler la valeur et de simplement répondre à onChange événements. Dans ce cas, vous pouvez utiliser le defaultValue prop pour définir une valeur initiale.
```
<div>
 <select defaultValue={this.state.selectValue} 
 onChange={this.handleChange} 
 >
    <option value="Orange">Orange</option>
    <option value="Radish">Radish</option>
    <option value="Cherry">Cherry</option>
  </select>
  <p>{message}</p>
  </div>       
```
http://jsfiddle.net/kb3gN/10396/

Les docs pour ce sont grands: http://facebook.github.io/react/docs/forms.html
et aussi de montrer comment travailler avec les sélections multiples.

Mise à JOUR

Une variante de l'Option 1 (contrôlé à l'aide d'un composant) est d'utiliser Redux et Réagir-Redux pour créer un composant conteneur. Cela implique connect et un mapStateToProps fonction, ce qui est plus facile que cela puisse paraître, mais probablement exagéré si vous êtes juste de commencer.
- Hey, votre réponse était exactement ce que je cherchais! Cependant, je ne comprends pas l'objectif de valeur={présent.état.selectValue} . Je regarde les docs et il stipule que :la valeur de l'élément affiché de toujours tenir compte de la valeur prop. Cependant, votre exemple semble fonctionner même si je supprime la ligne: valeur={présent.état.selectValue}. exactement ce que fait cette ligne? Comment est-ce si différent de celui de l'exemple dans les docs où ils ont de la valeur d'usage="Bonjour!"? Il me semble que la seule chose qui compte, c'est la handleChange (qui traite de setState) la méthode et le message variable.
- Bonne question! Dans les Composants commandés exemple, value={this.state.selectValue} efficacement définit la valeur par défaut de l'entrée. Ce n'était pas clair avant, parce que "Orange" aurait été la valeur par défaut de toute façon puisque c'est la première option. J'ai mis à jour le code de "Radis" comme valeur initiale de this.state.selectValue. Si vous commentez la ligne que vous avez mentionné, c'est le résultat: jsfiddle.net/f00erjqs L'INTERFACE utilisateur est hors de synchronisation.
- Merci!!!! C'est parfait. Je crois que c'était la nature de la liste déroulante où orange aurait été la valeur d'origine qui m'ont troublé. Merci pour la clarification.
- Bien sûr! Avoir du plaisir. Je recommande la lecture à travers les todomvc.com/examples/react/# source pour voir comment travailler par le biais de la manipulation de la saisie de l'utilisateur.
InformationsquelleAutor Max Heiber
14

Mettre en œuvre votre Déroulant comme
```
<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
```
Maintenant, pour obtenir la valeur de l'option sélectionnée de la liste déroulante du menu utilisation:
```
let res = this.menu.value;
```
- Je recommande d'éviter les refs. Le point de l'ensemble de la virtual DOM est de faire abstraction du réel DOM, mais refs vous lient à la vraie DOM. Plus la discussion ici: stackoverflow.com/a/29504636/2482570 et dans les docs officielles: facebook.github.io/réagir/docs/.... Aussi, pouvez-vous mettre à jour votre réponse à l'utilisation de la nouvelle ref attribut de rappel de l'API (facebook.github.io/réagir/docs/...)?
InformationsquelleAutor Shubham Khatri
10

Suffit d'utiliser onChange cas de la <select> objet.
La valeur sélectionnée est en e.target.value ensuite.

Par la voie, c'est une mauvaise pratique à utiliser id="...". Il est préférable d'utiliser ref=">.."
http://facebook.github.io/react/docs/more-about-refs.html
- Un exemple de code aurait fait cette réponse beaucoup plus précieuse, en particulier pour les débutants.
InformationsquelleAutor Karén

Comme pour le développeur front-end de nombreuses fois que nous sommes confrontés avec les formes dans lesquelles nous avons à gérer les listes déroulantes et nous avons à
utiliser la valeur du choix du menu pour effectuer une certaine action ou l'envoi de la valeur sur le Serveur, c'est très simple
vous devez écrire le simple déroulant en HTML, il suffit de mettre la un onChange méthode pour la sélection dans la liste déroulante
chaque fois que l'utilisateur de modifier la valeur de la liste déroulante définir cette valeur à l'état de sorte que vous pouvez facilement y accéder en AvFeaturedPlayList
1
rappelez-vous que vous obtenez toujours le résultat comme valeur de l'option et de ne pas la liste déroulante texte qui est affiché sur l'écran

import React, { Component } from "react";
import { Server } from "net";

class InlineStyle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: ""
    };

    this.handleDropdownChange = this.handleDropdownChange.bind(this);
  }

  handleDropdownChange(e) {
    this.setState({ selectValue: e.target.value });
  }

  render() {
    return (
      <div>
        <div>
          <div>
            <select id="dropdown" onChange={this.handleDropdownChange}>
              <option value="N/A">N/A</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>

          <div>Selected value is : {this.state.selectValue}</div>
        </div>
      </div>
    );
  }
}
export default InlineStyle;

InformationsquelleAutor ABHIJEET KHIRE

Vous devez vous connecter pour publier un commentaire.

Mise à JOUR