在react-select中选择选项时，输入值不会改变

Question

I'm using react-select to define a select input control in my react application. This is how I'm using the component:

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

Before selecting any option I see a Select... placeholder as the input value. This doesn't change after selecting an option: the input value doesn't change and the Select... placeholder appears to be the selected "option".

Is there something wrong with how I'm using the component?

Answer 1

Define the Select value in state variable, and logChange function will return an object , assign the value of that object to state variable, it will work, Check this code:

 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'/>