OnChange-Ereignis mit React JS für Dropdown

Lesezeit: 5 Minuten
var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

Die onChange Veranstaltung funktioniert nicht.

OnChange Ereignis mit React JS fur Dropdown
Felix Klinge

Das Änderungsereignis wird am ausgelöst <select> Element, nicht das <option> Element. Das ist jedoch nicht das einzige Problem. So wie du das definiert hast change -Funktion bewirkt kein erneutes Rendern der Komponente. Es scheint, als hätten Sie das Konzept von React noch nicht vollständig verstanden, also vielleicht “Denken in Reaktion” hilft.

Sie müssen den ausgewählten Wert als Status speichern und den Status aktualisieren, wenn sich der Wert ändert. Das Aktualisieren des Status löst ein erneutes Rendern der Komponente aus.

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

Beachte das auch <p> Elemente haben kein a value Attribut. React/JSX repliziert einfach die bekannte HTML-Syntax, es führt keine benutzerdefinierten Attribute ein (mit Ausnahme von key und ref). Wenn Sie möchten, dass der ausgewählte Wert der Inhalt der <p> -Element und fügen Sie es einfach ein, wie Sie es mit jedem statischen Inhalt tun würden.

Erfahren Sie mehr über Ereignisbehandlung, Zustands- und Formularsteuerelemente:

  • Wie bekomme ich den inneren Text ohne die value derselbe wie der innere Text sein?

    – ausdruckloses Gesicht

    23. April 2018 um 6:20 Uhr

  • @ZeroDarkThirty: Das Übliche: event.target.textContent

    – Felix Klinge

    23. April 2018 um 15:21 Uhr

  • @FelixKling Wenn ich textContent verwende, werden alle Optionen innerhalb des Select-Tags gedruckt. Was kann ich tun, um nur die ausgewählten zu erhalten?

    – Juan

    30. Juni 2020 um 19:00 Uhr

  • @ Juan: Versuchen Sie es event.target.slectedOptions[0].label.

    – Felix Klinge

    1. Juli 2020 um 7:18 Uhr


  • @FelixKin: Verwenden Sie event.persist() in der onChange-Funktion, da das Ziel null ist, wenn dies nicht verwendet wird.

    – Amrutha vs

    21. Oktober 2020 um 5:06 Uhr


OnChange Ereignis mit React JS fur Dropdown
ahota

Reaktionshaken (16.8+):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

OnChange Ereignis mit React JS fur Dropdown
Kirk Strobeck

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);

  • sehr gut. und Sie können das Ergebnis der Änderung auf diese Weise sehen

    {this.state.value}

    – Mohammad Farahani

    15. Juli 2018 um 6:29 Uhr

  handleChange(value, selectOptionSetter) => {
     selectOptionSetter(value)
     // handle other stuff like persisting to store etc
   }

  const Dropdown = (props) => {
  const { options } = props;
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => handleChange(e.target.value, setSelectedOption)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

Wenn Sie select als Inline zu einer anderen Komponente verwenden, können Sie auch wie unten angegeben verwenden.

<select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="TODAY">Today</option>
    <option value="THIS_WEEK" >This Week</option>
    <option value="THIS_MONTH">This Month</option>
    <option value="THIS_YEAR">This Year</option>
    <option selected value="LAST_AVAILABLE_DAY">Last Availabe NAV Day</option>
</select>

Definieren Sie für die Komponente, in der select verwendet wird, die Funktion zur Behandlung von onChange wie folgt:

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}

1645703708 33 OnChange Ereignis mit React JS fur Dropdown
Abolfazl Miadian

Danke Felix Kling, aber seine Antwort muss ein wenig geändert werden:

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

1645703708 474 OnChange Ereignis mit React JS fur Dropdown
Dharman

Ich werde dies hier hinzufügen, falls es jemandem hilft, weil dies die Lösung war, die mir geholfen hat.

Dies dient dazu, den AUSGEWÄHLTEN INDEX zu erhalten. Nicht für den Wert. (Arbeitete für mich, weil meine Optionsliste eine Liste von Zahlen war)

const [selectedOption, setSelectedOption] = useState(0)
<select onChange={event => setSelectedOption(event.target.options.selectedIndex)}>

842860cookie-checkOnChange-Ereignis mit React JS für Dropdown

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy