選択したドロップダウンから最新の値を取得するには

Question

私は動的に入力するこのdropdonwを持っています。ユーザーが項目を選択したときには、'SelectedValue'と設定する必要があります。

状態'selectedValue'私はfolllowngコードを書いていますが、このコードを実行すると、alert()は、常に新しい値ではなく古い値を表示します。何故ですか？

内の関数は、クラスが状態はこれです。この

ddlProdCatsChanegeEvent: function(e) { 

   

   if (this.state.isMounted) 

   { 

       var ele = document.getElementById('ddlCategories'); 

       var seleValue = ele.options[ele.selectedIndex].text; 

       this.setState({selectedValue:seleValue}); 

       alert(this.state.selectedValue);//this always display the old selected value NOT THE new one 

   } 

}, 

ある反応：

getInitialState:function(){ 

   return{data1:[], data2:[], isMounted:false, selectedValue:''} 

} 

Answer 1

まず、私はあなたの代わりにDOM要素にアクセスするためにrefsを利用することをお勧めしますすべての平凡なjavascriptの。その必要はありませんが、そのJSXの構文とそれを使用することができます。

第二、SETSTATEは状態を変異させるためにいくつかの時間がかかり、アラートがトリガされる前に、それが変更されていないので、あなたがpreviouly選択した値を見ている理由のthats。

this.setState({selectedValue: value}, function(){ 
     alert(this.state.selectedValue); 
     }); 

完全なコードとしてSETSTATEのコールバックメソッドで警告ボックスを置きます。

var Hello = React.createClass({ 
    getInitialState: function() { 

    return{ selectedValue:''} 
    }, 
    handleChange: function(e) { 

     var value = ReactDOM.findDOMNode(this.refs.selectValue).value; 
     this.setState({selectedValue: value}, function(){ 
     alert(this.state.selectedValue); 
     }); 

    }, 
    render: function() { 

    return (<div> 
      Hello {this.props.name} 
      <div> 
      <select ref="selectValue" onChange={this.handleChange}> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="mercedes">Mercedes</option> 
      <option value="audi">Audi</option> 
      </select> 
      </div> 
      </div> 
)} 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

JSFIDDLE

Answer 2

UPDATE this example

を見て非常に意欲が直接DOMを操作する、またはgetElementById()のようなメソッドを使用して反応します。したがって、ソリューションw.r.tを書いてください。あなたのコードは間違っています。代わりに、反応の仕組みや意図したものを実装する方法を理解するのに役立つサンプルを削除します。

いつもReactDOMを使うことができますが、それは過剰です。代わりにevent.target.valueを使用して、<select />ボックスから直接更新値を取得することができます。 <select />の入力方法はまったく自由です。私はArray.map()を使ってデータを繰り返し処理し、<option />のセットを返す方が好きです。

また、() => {}はes6の矢印機能です。いつでもes5 function() {}に置き換えることができます。

import React from 'react'; 

class SelectExample extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedValue: 0 
    } 
    this.updateValue = this.updateValue.bind(this); 
    } 

    updateValue(value) { 
    this.setState({ 
     selectedValue: value 
    },() => alert(value)); 
    } 

    render() { 
    const dataSet = [1, 2, 3, 4]; 
    return (
     <div> 
     <select value={this.state.selectedValue} onChange={(e) => this.updateValue(+e.target.value)}> 
      <option value={0}>Default Value</option> 
      { 
      dataSet.map((item, idx) => <option value={item} key={idx}>{"Example " + item}</option>) 
      } 
     </select> 
     </div> 
    ) 
    } 
} 

このコードはテストされていません。だから、エラーがあればそれをクリアしたいかもしれません。あなたはdocument.getElementByIdを使ってReactのユースケースに対して完全に行きます。私がここに投稿したようなものにあなたのコードを変更してください。

も参照してください。Controlled Component