Question

我将react-select v2与异步选择组件一起使用。

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

如何使用键盘上的向下键或鼠标悬停来显示突出显示的选项的值？

我想基于突出显示选项触发重定向或setState。 onKeyDown仅将输入值发送为event.target.value。

以下是Nordstrom网站上的示例：

Answer 1

我认为不可能仅使用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>
    );
  }
}

然后，您可以使用与AsyncSelect相同的方式使用此自定义组件，但能够对重点选项的更改做出反应：

class App extends React.Component {

  onFocusedOptionChanged = focusedValue => console.log(focusedValue) 

  render() {
    return (
      <div>
        <MyAsyncSelect
          cacheOptions
          loadOptions={loadOptions}
          defaultOptions
          onInputChange={this.handleInputChange}
          onFocusedOptionChanged={this.onFocusedOptionChanged}
        />
      </div>
    );
  }
}

工作演示：https://stackblitz.com/edit/react-z7izuy

编辑：带有附加道具onOptionSelected的版本，当用户选择选项时将调用该版本。 https://stackblitz.com/edit/react-wpljbl

Answer 2

我通过使用onChange道具解决了它。

UI /选择组件

  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}
      />
    );
  }

}

我在其中将CustomSelect与react-router 4一起使用的父母（我可以访问withRouter）。

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);

Answer 3

那对我有用。

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


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

获取React-Select中突出显示的选项的值

3 个答案: