reactjs - react 选择防止菜单打开 onInputChange

Question

我正在尝试使用 react-select 组件作为输入和选择组件。

这样做我想防止在用户键入输入时打开菜单。

我只是找不到通过 prop 或更新 onInputChange 方法来更新此行为的方法。

如果我决定使用带有 menuIsOpen 属性的受控状态，我的问题是我无法重新打开单击的菜单控件。

这是我到目前为止所得到的，你们知道如何实现这一点吗？

<StyledSelect
  components={{ IndicatorSeparator }}
  {..._.omit(this.props, [])}
  filterOption={() => true}
  inputValue={inputValue}
  onChange={value => {
    this.select.setState({ menuIsOpen: false });
    this.setState({ selectValue: value });
  }}
  onInputChange={(value, event) => {
    if (event && event.action === 'input-change') {
      this.setState({ inputValue: value });
    }
  }}
  openMenuOnClick={false}
/>

Example

Answer 1

我认为使用 onInputChange 的方向是正确的，我会添加一个受控的 menuIsOpen 属性，如以下代码所示:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuIsOpen: false
    };
  }

  openMenu = () => {
    this.setState({ menuIsOpen: !this.state.menuIsOpen });
  };

  onInputChange = (props, { action }) => {
    if (action === "menu-close") this.setState({ menuIsOpen: false });
  };

  render() {

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <div
            onClick={this.openMenu}
            style={{ display: "flex", alignItems: "center" }}
          >
            <span style={{ marginLeft: 12 }}>kg</span>
            <components.DropdownIndicator
              {...props}
              onClick={() => {
                console.log("ici");
              }}
            />
          </div>
        )
      );
    };

    return (
      <Select
        components={{ DropdownIndicator }}
        options={options}
        onChange={this.onChange}
        onInputChange={this.onInputChange}
        menuIsOpen={this.state.menuIsOpen}
      />
    );
  }
}

此代码的想法是在 DropdownIndicator 自定义组件上触发 onClick 事件。

这里是live example .