在反应选择中选择选项时，输入值不会改变

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