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

Question

我正在使用 react-select 在我的 React 应用程序中定义一个 select 输入控件。这就是我使用组件的方式：

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

在 selecting 任何选项之前，我看到一个 Select... 占位符作为输入值。这在 select 一个选项后不会改变：输入值不会改变并且 Select... 占位符似乎是 selected "option".

我使用组件的方式有问题吗？

Answer 1

在state变量中定义Select值，logChange函数将return一个object，赋值那个value object 状态变量，它将起作用，检查此代码：

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

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

Input Value doesn't change when selecting an option in react-select

javascript

reactjs

react-select