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

输入字段不显示所选值

2 个答案: