单击输入字段时，ANTD 下拉菜单不应关闭

Question

我正在尝试使用 ANTD 组件实现下拉功能：

当输入字段中有一些文本时，应显示下拉列表。
当我在下拉菜单外单击时，下拉菜单应该会关闭。
当我单击下拉菜单时，下拉菜单不应关闭。
如果输入字段中没有文本，则不应打开下拉菜单。
如果有一些文本，单击输入字段时下拉菜单不应关闭。

我无法达到第 5 个要求。每当我单击“输入”字段时，下拉菜单都会打开和关闭，如下所示：

这不应该发生。

示例工作代码：

state = {
    visible: false,
    searchInput: null
  };

handleVisibleChange = flag => {
    if (!this.isDefined(this.state.searchInput)) {
      this.removeDropdown();
    } else {
      this.setState({ visible: flag });
    }
  };

removeDropdown = () => {
  this.setState({ visible: false });
};

showDropdown = () => {
  this.setState({ visible: true });
};

checkInput = value => {
  if (this.isDefined(value)) {
    this.setState({ searchInput: value });
    this.showDropdown();
  } else {
    this.setState({ searchInput: null });
    this.removeDropdown();
  }
};

render() {
  const menu = (
    <Menu>
      <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
      <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
      <Menu.Item key="3">Clicking me will not close the menu.</Menu.Item>
    </Menu>
  );
  return (
    <Dropdown
      overlay={menu}
      trigger={['click']}
      onVisibleChange={this.handleVisibleChange}
      visible={this.state.visible}
    >
      <Search
        value={this.state.searchInput}
        onInput={e => this.checkInput(e.target.value)}
      />
    </Dropdown>
  );
}

完整代码：https://stackblitz.com/edit/react-srz4ml?file=index.js

我尝试使用 onBlur() 和 onFocus() 方法而不是 onVisibleChange() 但它违反了第三个要求。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

我对此进行了一些试验，似乎没有一种超级简单的方法可以做到这一点，但我能够让它与一些丑陋的状态管理一起工作。 https://stackblitz.com/edit/react-srz4ml-p6faxs?file=index.js 希望您能想出一个更清洁的解决方案。

state = {
    searchInput: null,
    isVisable: false,
    clickedPrevState: false
  };

  render() {
    const getNewState = (prevState, event, value) => {
      console.log(prevState, event, value);
      let newState = { ...prevState, clickedPrevState: false };
      switch (event) {
        case 'input':
          newState.isVisable = value ? true : false;
          newState.searchInput = value;
          break;
        case 'clicked':
          if (prevState.searchInput) {
            newState.isVisable = true;
            newState.clickedPrevState = true; // used by next getNewState to determine if it was a click on input
          } else newState.isVisable = false;
          break;
        case 'change':
          if (prevState.searchInput && (value || prevState.clickedPrevState)) {
            newState.isVisable = true;
          } else newState.isVisable = false;
          break;
        default:
          newState.isVisable = false;
      }
      return newState;
    };

    const menu = (
      <Menu>
        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
        <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
        <Menu.Item key="3">Clicking me will not close the menu.</Menu.Item>
      </Menu>
    );
    return (
      <Dropdown
        overlay={menu}
        trigger={['click']}
        visible={this.state.isVisable}
        onVisibleChange={flag =>
          this.setState(prevstate => {
            return getNewState(prevstate, 'change', flag);
          })
        }
        onClick={e =>
          this.setState(prevstate => {
            return getNewState(prevstate, 'clicked');
          })
        }
      >
        <Search
          value={this.state.searchInput}
          onInput={e =>
            this.setState(prevstate => {
              return getNewState(prevstate, 'input', e.target.value);
            })
          }
        />
      </Dropdown>
    );
}

单击输入字段时，ANTD 下拉菜单不应关闭

ANTD Dropdown should not close when clicked on the Input field

javascript

reactjs

antd