输入字段不显示选定的值

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值）