输入字段不显示所选值答案

【问题标题】：Input field does not show selected value输入字段不显示所选值
【发布时间】：2017-08-03 04:02:11
【问题描述】：

当我选择一个国家时，输入不会更新以显示它。我可以控制台记录该值，因此我知道 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)}
     />

下拉列表中有可用的选项，我可以选择它们，控制台日志将记录我选择的值。我有另一个控制台日志记录状态，那就是记录正确的状态。我只是不知道为什么输入没有显示我选择的选项。

【问题讨论】：

你的输入框在哪里？还有onSelectCountry，在setState中，应该是val，而不是val.Value

标签： react-select

【解决方案1】：

在github issue 上找到了这个问题的答案：

组件现在被“控制”了，这意味着你必须传递值作为道具并始终处理 onChange 事件。看 https://facebook.github.io/react/docs/forms.html#controlled-components

【讨论】：

【解决方案2】：

我认为这是您在 onSelectCountry 中设置状态时的拼写错误应该是this.setState({countrySelection: val.value})（小v的值）

【讨论】：