更新ReactJS中的下拉菜單的值

在html表單中，我有這個選擇菜單。這就像用戶可以稍後編輯它並更改值的配置文件。這裏是FirstComponent代碼正在呈現形式：更新ReactJS中的下拉菜單的值

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

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

如果用戶想編輯的形式，getValue()將電流值發送給SelectLanguage組件。以下是此組件的代碼：

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

問題是當用戶從下拉菜單中選擇一個新值時，它不更新它！它仍然顯示以前的值。我不知道如何編寫handleLangChange函數來處理它。我嘗試了幾種方法，但無法得到結果：/任何人都可以幫我解決它嗎？

來源

2016-08-08 Birish

您需要使用 this.props.onSelectLanguage（val.id）;

你需要做的結合爲好，免得：

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

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

編號：https://facebook.github.io/react/tips/communicate-between-components.html

來源

2016-08-08 11:50:03 Vivian

我只是說你的變化。我可以看到現在'handleLanguageCode'獲得了新值（'console.log（langValue）;'輸出新的選定值）。但下拉菜單並沒有顯示出變化。此外，我收到此警告： '警告：bind（）：您正在將組件方法綁定到組件。 React會以高性能的方式自動執行此操作，因此您可以安全地刪除此調用。' – Birish

我還將這兩行添加到'handleLangChange'：'this.setState（{value：val.name}）;'和 'this.props.onSelectLanguage（val.id）; ' – Birish

@ vivian：我想我並不需要'綁定'，它顯然是自動完成的！ – Birish

更新ReactJS中的下拉菜單的值

回答

相關問題