React-Select 下拉菜单无法正确使用值

Question

我在我的应用程序中使用 React-Select 创建下拉菜单并更新一些文本框。这是非常简化的代码，应该可以解决问题（我找不到？）。

import Select from 'react-select';
// other imports - react, bootstrap, ...

class UpdateMe extends Component {

constructor(props) {
     this.state = {
          options: [ 
             {label: 'hello', value: 'greeting'},
             {label: 'goodbye', value: 'farewell'} ],
          selectedOpt: '',
          textOne: '', 
     // other stuff in here not relevant, I believe, to problem
     }
}

handleDropdown(event) {
     this.clearBoxes();
     this.setState({
          selectedOpt: event.value,
          textOne: event.label
     });
} 


// in my render method in all the div's and stuff
<Select isClearable={false} className="dropdown-me"
 value={this.state.selectedOpt}
 options={this.state.options}
 onChange={this.handleDropdown.bind(this)} />

所以这是对我的代码的简化重写。基本上发生的事情是，当我单击下拉菜单时，它不会 :

显示下拉列表时突出显示选项
点击时显示选项名称

如果有人能帮我调试这个问题，我将不胜感激！谢谢

Answer 1

按照docs，handleDropdown函数直接将selectedOption作为参数，需要这样写函数，

handleDropdown(selectedOption) {
     this.clearBoxes();
     this.setState({
          selectedOpt: selectedOption ,
          textOne: selectedOption.label
     });
}

注意： react-select 需要选择 {label: 'hello', value: 'greeting'} 格式的值。仅将值设置为 selectedOption.value 将不起作用。

React-Select 下拉菜单无法正确使用值

React-Select dropdown not functioning correctly with value

reactjs

react-select