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，<attr name="backgroundColor" format="reference" />函数直接将handleDropdown作为参数，您需要编写如下函数，

selectedOption

注意：handleDropdown(selectedOption) { this.clearBoxes(); this.setState({ selectedOpt: selectedOption , textOne: selectedOption.label }); }需要react-select格式的选定值。仅将值设置为{label: 'hello', value: 'greeting'}无效。

React-Select下拉列表无法正确使用值

1 个答案: