在反應選擇中選擇選項時，輸入值不會改變

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