Reactjs 获取React Select中高亮显示的选项的值

我正在使用一个异步选择组件

        <AsyncSelect
            cacheOptions
            components={{ Option }}
            loadOptions={this.getSearchItems}
            onInputChange={this.handleInputChange}
            placeholder="Search..."
            onKeyDown={this._handleKeyPress}
        />

---

我认为仅使用
react-select
api是不可能的，但是您可以创建自己的HOC，它将此功能添加到AsyncSelect中

class MyAsyncSelect extends React.Component {

  /* Select component reference can be used to get currently focused option */
  getFocusedOption() {
    return this.ref.select.select.state.focusedOption;
  }

  /* we'll store lastFocusedOption as instance variable (no reason to use state) */
  componentDidMount() {
    this.lastFocusedOption = this.getFocusedOption();
  }

  /* Select component reference can be used to check if menu is opened */
  isMenuOpen() {
    return this.ref.select.state.menuIsOpen;
  }

  /* This function will be called after each user interaction (click, keydown, mousemove).
     If menu is opened and focused value has been changed we will call onFocusedOptionChanged 
     function passed to this component using props. We do it asynchronously because onKeyDown
     event is fired before the focused option has been changed.
  */
  onUserInteracted = () => {
    Promise.resolve().then(() => {
      const focusedOption = this.getFocusedOption();
      if (this.isMenuOpen() && this.lastFocusedOption !== focusedOption) {
        this.lastFocusedOption = focusedOption;
        this.props.onFocusedOptionChanged(focusedOption);
      }
    });
  }

  /* in render we're setting onUserInteracted method as callback to different user interactions */
  render () {
    return (
      <div onMouseMove={this.onUserInteracted} onClick={this.onUserInteracted}> 
        <AsyncSelect 
          {...this.props} 
          ref={ref => this.ref = ref}
          onKeyDown={this.onUserInteracted}
        />
      </div>
    );
  }
}

工作演示：

编辑：
带有附加属性的版本选择了选项，当用户选择选项时将调用该选项。
我用onChange道具解决了这个问题

用户界面/选择组件

  class CustomSelect extends React.PureComponent<IProps> {
    handleChange = (selectedOption: any) => {
    if (this.props.onSelect) {
        this.props.onSelect(selectedOption);
    }
  };

  render() {
    const { data } = this.props;
    return (
      <Select
        onChange={this.handleChange}
        options={data}
      />
    );
  }

class CustomSelect扩展了React.PureComponent{
handleChange=（所选选项：任意）=>{
if（this.props.onSelect）{
this.props.onSelect（selectedOption）；
}
};
render（）{
const{data}=this.props；
返回(
);
}

}

我将CustomSelect与react router 4一起使用的父级（我可以访问withRouter）

class SelectParent扩展了React.Component{
onSelect=（选项：任意）=>{
const id=option.value；
const{history}=this.props；
history.push（`/category/${id}`）；
};
render（）{
const{data}=this.props；
返回(
);
}
}
使用路由器导出默认值（选择父级）；


这对我来说是个好办法

 handleOnChange = (value, { action }) => {
    if (action === 'select-option') {
      // do something
    }
  };


 render() {
   return (
     <Select onChange={this.handleOnChange} ... />
   )
 }

handleOnChange=（值，{action}）=>{
如果（操作=='选择选项'）{
//做点什么
}
};
render（）{
返回(
)
}
不错！我仍然不清楚如何仅在
event.key=='enter'
上触发。我把支票放在哪里？到目前为止，任何鼠标悬停或向下键都会触发我的功能。我不确定我是否理解你的意思，因为在你的问题中，你想
访问由于使用键盘上的向下键或鼠标悬停而突出显示的选项的值？
。也许只需告诉我您希望对哪些事件做出反应，以及在此类事件发生时应传递哪些数据。抱歉，不清楚。每个选项都有自己的链接，包括输入值（我手动将其传递到选项中），因此当用户通过单击选项或按聚焦选项上的“enter”键选择选项时，我希望重定向到唯一的选项链接。换句话说，onKeyDown应该接受当前聚焦选项，不是当前输入值。功能相同。我能够通过传递一个自定义选项组件并封装在标记中来实现。
class SelectParent extends React.Component<IProps> {
  onSelect = (option: any) => {
  const id = option.value;
  const { history } = this.props;
  history.push(`/category/${id}`);
};

render() {
  const { data } = this.props;
  return (
    <Select
    data={data}
    onSelect={this.onSelect}
  />);
  }
}

export default withRouter<any>(SelectParent);

 handleOnChange = (value, { action }) => {
    if (action === 'select-option') {
      // do something
    }
  };


 render() {
   return (
     <Select onChange={this.handleOnChange} ... />
   )
 }