OnChange-Ereignis mit React JS als Dropdown-Liste

157
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 onChangeVeranstaltung funktioniert nicht.

user544079
quelle

Antworten:

304

Das Änderungsereignis wird für das <select>Element ausgelöst , nicht für das <option>Element. Dies ist jedoch nicht das einzige Problem. Die Art und Weise, wie Sie die changeFunktion definiert haben , führt nicht zu einem erneuten Rendern der Komponente. Es scheint, als hätten Sie das Konzept von React noch nicht vollständig verstanden. Vielleicht hilft "Thinking in React" .

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

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

Beachten Sie auch, dass <p>Elemente kein valueAttribut haben. React / JSX repliziert einfach die bekannte HTML-Syntax und führt keine benutzerdefinierten Attribute ein (mit Ausnahme von keyund ref). Wenn Sie möchten, dass der ausgewählte Wert der Inhalt des <p>Elements ist, fügen Sie ihn einfach ein, wie Sie es bei jedem statischen Inhalt tun würden.

Weitere Informationen zur Ereignisbehandlung, Status- und Formularsteuerung:

Felix Kling
quelle
Wie kann ich den inneren Text erhalten, ohne valuedass er mit dem inneren Text identisch ist?
blankface
@ ZeroDarkThirty: Das Übliche:event.target.textContent
Felix Kling
@FelixKling Wenn ich textContent verwende, werden alle Optionen im de Select-Tag gedruckt. Was kann ich tun, um nur die ausgewählten zu erhalten?
Juan
@ Juan: Versuchen Sie es event.target.slectedOptions[0].label.
Felix Kling
40
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);
Kirk Strobeck
quelle
sehr gut. und Sie können das Ergebnis der Änderung auf diese Weise sehen <div> <p> {this.state.value} </ p> </ div>
Mohammad Farahani
21

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 value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};
Ahota
quelle
1

Vielen Dank, 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); 
Abolfazl Miadian
quelle
2
Warum fügen Sie this.change.bindin onChange?
Junior Usca
0

Wenn Sie select als Inline für eine andere Komponente verwenden, können Sie diese 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 für onChange wie folgt:

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}
Satish
quelle
0
var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE
     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); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Sourav Purkait
quelle