web-dev-qa-db-fra.com

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

Je me sers de réagir et je veux obtenir la valeur de l'option sélectionnée d'un menu déroulant dans réagir mais je ne sais pas comment. Aucune suggestion? Merci! Ma liste déroulante est juste une sélection 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>
javascriptselectdrop-down-menumenureactjs
37
BlueElixir

Le code de la méthode render représente le composant à un moment donné. Si vous faites quelque chose comme ceci , l'utilisateur ne pourra pas faire de sélections à l'aide du contrôle de formulaire:

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

Il existe donc deux solutions pour travailler avec les contrôles de formulaire:

  1. Composants contrôlés Utilisez le composant state pour refléter les sélections de l'utilisateur. Ceci fournit le plus de contrôle, car toute modification apportée à state sera reflétée dans le rendu du composant:

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. Composants non contrôlés L'autre option consiste à ne pas contrôler la valeur et à répondre simplement aux événements onChange. 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 documents pour cela sont excellents: http://facebook.github.io/react/docs/forms.html et montrent également comment utiliser plusieurs sélections.

MISE À JOUR

Une variante de l'option 1 (utilisant un composant contrôlé) consiste à utiliser Redux et React-Redux pour créer un composant conteneur . Cela implique connect et une fonction mapStateToProps, ce qui est plus facile qu'il n'y paraît, mais probablement trop si vous débutez.

62
Max Heiber

Implémentez votre Dropdown en tant que

<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 d'option sélectionnée du menu déroulant, utilisez simplement:

let res = this.menu.value;
14
Shubham Khatri

Il suffit d’utiliser l’événement onChange de la <select> objet. La valeur sélectionnée est en e.target.value puis.

À propos, c’est une mauvaise pratique d’utiliser id="...". Il vaut mieux utiliser ref=">.."http://facebook.github.io/react/docs/more-about-refs.html

8
Karén

En ce qui concerne les développeurs front-end, nous avons souvent affaire à des formulaires dans lesquels nous devons gérer les listes déroulantes. Nous devons utiliser la valeur de la liste déroulante sélectionnée pour effectuer une action ou envoyer la valeur sur le serveur. C'est très simple. pour écrire la liste déroulante simple en HTML, il suffit de mettre la méthode onChange pour la sélection dans la liste déroulante chaque fois que l'utilisateur modifie la valeur de la liste déroulante afin de pouvoir y accéder facilement dans AvFeaturedPlayList 1 et non le texte déroulant qui est affiché à 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;
0
ABHIJEET KHIRE