如何在 Popover 中使用自动完成功能答案

【问题标题】：How to use Autocomplete inside Popover如何在 Popover 中使用自动完成功能
【发布时间】：2017-08-04 03:11:35
【问题描述】：

正如问题所暗示的，我想在 Popover 组件的内容中使用 Autocomplete 组件。问题是，当我单击自动完成组件显示的项目之一时，弹出框会关闭，而我希望它保持打开状态（它似乎将自动完成列表中的点击识别为弹出框之外）。有没有一种简单的方法可以做到这一点？我正在使用类似下面的代码。

const content = (
  <Form onSubmit={this.doSomething}>
    <FormItem>
      <Autocomplete />
    </FormItem>
    <FormItem>
      <Button htmlType="submit">
        Do It
      </Button>
    </FormItem>
  </Form>
);

...

handleVisibleChange = (visible) => {
  this.setState({ visible });
}

...

<Popover
  content={content}
  trigger="click"
  visible={this.state.visible}
  onVisibleChange={this.handleVisibleChange}>
    <a>Click me!</a>
</Popover>

我想过扩展 Popover 组件，然后覆盖它的 onClick 事件，但我不知道如何检查点击是在组件内部还是它的子组件。这是一种有效的方法吗？

提前致谢！

【问题讨论】：

如果不接受项目，您希望何时关闭下拉菜单？
我曾经想做类似的事情（在用户点击时间选择器时让弹出框保持不变），但在深入研究 antd 点击处理之前我放弃了尝试实现它。如果你弄清楚了，请分享。或者也许提交一个功能请求，但我怀疑它会（正确地）遇到“PR Welcome”......
我想在用户在“自动完成”字段中选择一个项目后单击弹出窗口内的按钮或单击弹出窗口或其内容外部时关闭它。问题在于 Popover 组件将自动完成列表考虑在 Popover 内容之外。

标签： javascript reactjs jsx antd

【解决方案1】：

这不再是问题，至少对于 antd v4 而言

这按预期工作，从列表中选择时弹出窗口不会关闭：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Popover, Button, AutoComplete } from "antd";
import "antd/dist/antd.css";
import "./index.css";

const mockVal = (str, repeat = 1) => ({
  value: str.repeat(repeat)
});

const Complete = () => {
  const [options, setOptions] = useState([]);

  const onSearch = (searchText) => {
    setOptions(
      !searchText
        ? []
        : Array.from({ length: 5 }, (_, i) => mockVal(searchText, i))
    );
  };

  const onSelect = (data) => {
    console.log("onSelect", data);
  };

  return (
    <AutoComplete
      options={options}
      style={{
        width: 200
      }}
      onSelect={onSelect}
      onSearch={onSearch}
      placeholder="input here"
    />
  );
};

const content = (
  <div>
    <Complete />
  </div>
);

ReactDOM.render(
  <div>
    <Popover content={content} title="Title" trigger="click">
      <Button>Click me</Button>
    </Popover>
  </div>,
  document.getElementById("container")
);

【讨论】：