Question

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

这样做是为了防止在用户输入内容时打开菜单。

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

如果我决定对menuIsOpen道具使用受控状态，我的问题是我无法设法重新打开被单击的Menu控件。

这是我到目前为止所拥有的，你们对如何实现这一目标有任何想法吗？

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

使用此代码的目的是在onClick自定义组件上触发DropdownIndicator事件。

这里是live example。

反应选择防止菜单打开onInputChange

1 个答案: