react-select防止菜單打開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}
/>

例

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事件。

這是一個實例 。