輸入字段不顯示選定的值

Question

當我選擇一個國家輸入未更新顯示它。我可以通過控制檯記錄該值，以便我知道onChange正在更新它。

this.state = { 
     countrySelection: "",  
     countryListFormatted: [ 
      {Value: "France", label: "France"}, 
      {Value: "Germany", label: "Germany"}, 
      {Value: "Greece", label: "Greece"}, 
      {Value: "Turkey", label: "Turkey"}, 
      {Value: "Italy", label: "Italy"}, 
      {Value: "Netherlands", label: "Netherlands"}, 
      {Value: "Portugal", label: "Portugal"}, 
      {Value: "Spain", label: "Spain"}, 
      {Value: "Switzerland", label: "Switzerland"}, 
      {Value: "United Kingdom", label: "United Kingdom"}, 
      {Value: "United States of America", label: "United States of America"} 
     } 

我沒有顯示整個網頁，但下面是我的onChange處理：

onSelectCountry(val){ 
    this.setState({countrySelection: val.Value}) 
    console.log(val) 
} 

和動作選擇組件：

<Select 
      searchable={true} 
      style={{border: "none", boxShadow: "none", highlight: "none"}} 
      placeholder="Country" 
      name="country-selection" 
      value={this.state.countrySelection} 
      options={this.state.countryListFormatted} 
      onChange={this.onSelectCountry.bind(this)} 
    /> 

下拉擁有可用的選項和我可以選擇它們，控制檯日誌將記錄我選擇的值。我有另一個控制檯日誌記錄狀態，並記錄正確的狀態。我只是不知道爲什麼輸入不顯示我選擇的選項。

Answer 1

找到了答案，這在github issue：

組件現已被「控制」，這意味着你必須通過價值 爲道具，總是處理onChange事件。見 https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 2

我認爲這是你的錯字，當你在onSelectCountry 設置狀態應該是this.setState({countrySelection: val.value})（小V值）