反応選択でオプションを選択したときに入力値が変更されない

Question

反応アプリケーションで選択入力コントロールを定義するのにreact-selectを使用しています。これは私が部品を使用している方法です：

<Select 
    onChange={function(e) {console.log(e)}} 
    options={[ 
     {value: "sf", label: "San Francisco"}, 
     {value: "nyc", label: "New York City"} 
    ]} 
></Select> 

任意のオプションを選択する前に、私は、入力値としてSelect...プレースホルダを参照してください。オプションを選択すると変更されません。入力値は変更されず、Select...プレースホルダが選択された「オプション」のように見えます。

コンポーネントの使用方法に問題がありますか？

Answer 1

state変数でSelect値を定義し、logChange機能がobjectを返します、状態変数にそのobjectのvalueを割り当て、それは動作しますが、このコードをチェックしてください：

class App extends React.Component{ 
 

 
    constructor(){ 
 
    super(); 
 
    this.state = {value: ''} 
 
    } 
 
    
 
    logChange(val) { 
 
    console.log("Selected: " + val.value); 
 
    this.setState({value: val.value}); 
 
    } 
 

 
    render(){ 
 
    var options = [ 
 
     {value: 'one', label: 'One' }, 
 
     {value: 'two', label: 'Two' } 
 
    ]; 
 
    return(
 
     
 
     <Select 
 
      name="form-field-name" 
 
      value={this.state.value} 
 
      options={options} 
 
      onChange={this.logChange.bind(this)} 
 
     /> 
 
     
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/classnames/index.js"></script> 
 
<script src="https://unpkg.com/react-input-autosize/dist/react-input-autosize.js"></script> 
 
<script src="https://unpkg.com/react-select/dist/react-select.js"></script> 
 

 
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css"> 
 

 
<div id='app'/>