Aktualisieren Sie den Wert eines Dropdown-Menüs in ReactJS

Question

In einem HTML-Formular habe ich dieses Auswahlmenü. Es ist wie ein Profil, das ein Benutzer später bearbeiten und die Werte ändern kann. Hier ist der FirstComponent Code, der das Formular Rendering:

export const FirstComponent = React.createClass({ 
    handleLanguageCode: function(langValue) { 
     this.setState({ 
      language: langValue 
     }); 
    }, 

    renderField() { 
    return (
      <div> 
       <SelectLanguage onSelectLanguage={this.handleLanguageCode} defValue={getValue()} /> 
      </div> 
      );   
    } 
)} 

Wenn der Benutzer das Formular bearbeiten, getValue() wird der aktuelle Wert SelectLanguage Komponente senden. Im Folgenden ist der Code für diese Komponente:

import { DropdownList } from 'react-widgets'; 
    export const SelectLanguage = React.createClass({ 
     getInitialState: function(){ 
      return{ 
       value: '', 
      }; 
     }, 

     handleLangChange: function (val) { 
      var name = val.name 
      //this.props.onSelectLanguage(val.id); //??? 
      //this.props.defValue(name);   //??? 
      //this.setState({defValue: name}); //??? 
      //this.state.value = defaultVal  //??? 
     }, 

     componentWillMount() { 
      this.componentWillReceiveProps(this.props); 
     }, 

     componentWillReceiveProps(props) { 
      var def = this.props.defValue || 'eng'; 
      this.setState({value:def}); 
     }, 

     render() { 
      const languages = [{"id": "eng", "name": "english"}, {"id": "swd", "name": "swedish"}] // it's a big json array!! 
       return (
        <div > 
         <DropdownList 
          ref='dropdown' 
          data={languages} 
          valueField='id' 
          textField={item => item.name} 
          caseSensitive={false} 
          filter={this.filterLanguage} 
          value={this.state.value} 
          onChange={this.handleLangChange} /> 
        </div>    
       ); 
     } 
    }); 

Das Problem ist, wenn der Benutzer einen neuen Wert aus dem Dropdown-Menü auswählt, es nicht aktualisiert !! Es zeigt immer noch den vorherigen Wert an. Ich weiß nicht, wie man die handleLangChange Funktion schreibt, um es zu behandeln. Ich habe mehrere Möglichkeiten ausprobiert, konnte aber das Ergebnis nicht erreichen:/Kann mir jemand helfen, es zu reparieren?

Answer 1

Sie müssen this.props.onSelectLanguage (val.id) verwenden;

Sie müssen auch verbindlich tun, so:

onSelectLanguage={this.handleLanguageCode.bind(this)} 

onChange={this.handleLangChange.bind(this)} 

Ref: https://facebook.github.io/react/tips/communicate-between-components.html