it-swarm.com.de

So erhalten Sie den ausgewählten Wert eines Dropdown-Menüs in ReactJS

Ich verwende reagiere und ich möchte den Wert der ausgewählten Option eines Dropdowns in reagieren erhalten, aber ich weiß nicht wie. Irgendwelche Vorschläge? Vielen Dank! Mein Dropdown ist nur eine Auswahl wie:

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

Der Code in der render -Methode repräsentiert die Komponente zu einem bestimmten Zeitpunkt. Wenn Sie so ähnlich tun, kann der Benutzer keine Auswahl mit dem Formularsteuerelement treffen:

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

Daher gibt es zwei Lösungen für die Arbeit mit Formularsteuerelementen:

  1. Kontrollierte Komponenten Verwenden Sie die Komponente state, um die Auswahl des Benutzers widerzuspiegeln. Dies bietet die größte Kontrolle, da alle Änderungen, die Sie an state vornehmen, im Rendering der Komponente berücksichtigt werden:

beispiel:

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. Nicht gesteuerte Komponenten Die andere Option besteht darin, den Wert nicht zu steuern und einfach auf onChange -Ereignisse zu reagieren. In diesem Fall können Sie die Stütze defaultValue verwenden, um einen Anfangswert festzulegen.

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

Die Dokumente dafür sind großartig: http://facebook.github.io/react/docs/forms.html und zeigen auch, wie man mit Mehrfachauswahl arbeitet.

AKTUALISIEREN

Eine Variante von Option 1 (unter Verwendung einer gesteuerten Komponente) besteht darin, Redux und React-Redux zu verwenden, um Containerkomponente zu erstellen. Dies beinhaltet connect und eine mapStateToProps -Funktion, die einfacher ist als es sich anhört, aber wahrscheinlich übertrieben ist, wenn Sie gerade erst anfangen.

62
Max Heiber

Implementiere dein Dropdown als

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

Um den ausgewählten Optionswert aus dem Dropdown-Menü zu erhalten, verwenden Sie einfach:

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

Verwenden Sie einfach onChange des Objekts <select>. Der ausgewählte Wert ist dann in e.target.value.

Übrigens ist es eine schlechte Praxis, id="..." Zu verwenden. Verwenden Sie besser ref=">.."http://facebook.github.io/react/docs/more-about-refs.html

8
Karén

Was Front-End-Entwickler betrifft, so haben wir es oft mit den Formularen zu tun, in denen wir die Dropdowns verarbeiten müssen, und wir müssen den Wert des ausgewählten Dropdowns verwenden, um eine Aktion auszuführen oder den Wert auf dem Server zu senden. Das ist sehr einfach Um das einfache Dropdown-Menü in HTML zu schreiben, setzen Sie einfach die Methode onChange für die Auswahl in das Dropdown-Menü, wenn der Benutzer den Wert des Dropdown-Menüs auf state setzt, damit Sie in AvFeaturedPlayList 1 problemlos darauf zugreifen können. Denken Sie daran, dass Sie immer das Ergebnis als Optionswert erhalten und nicht der auf dem Bildschirm angezeigte Dropdown-Text

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