点击后反应失去选择的焦点答案

【问题标题】：React lose focus of select after click点击后反应失去选择的焦点
【发布时间】：2021-01-21 16:49:41
【问题描述】：

我正在使用 react antd 组件库，在我在下拉列表中选择一个项目后，我无法失去选择的焦点。我在想它需要调用一个 blur 方法使其失去焦点，但我不确定。

这里是代码框：https://codesandbox.io/s/sizes-antd4103-forked-81i3d

复制步骤，

单击下拉列表并在下拉列表中选择一个名称项目。然后当下拉菜单关闭时，再次单击它。下拉菜单应该显示，但它没有。用户需要在下拉列表之外进行选择，然后再次单击它。我需要这样做，以便他们可以随时单击选择并显示下拉菜单。

【问题讨论】：

标签： reactjs

【解决方案1】：

因为你不需要使用open，而且你还有一些额外的错误

dropdownRender={menu => (
          <div>
             {menu}
           </dive>}

空标签看不顺眼，也不是什么好方法。

这是完整的代码代码

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Button } from "antd";
const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const SelectSizesDemo = () => {
  const [dropdown, setDropdown] = React.useState(false);

  function onChange(value) {
    console.log(`selected ${value}`);
    setDropdown(false);
  }

  function onBlur() {
    console.log("blur");
    setDropdown(false);
  }

  function onFocus() {
    console.log("focus");
    setDropdown(true);
  }

  function onSearch(val) {
    console.log("search:", val);
  }

  const handleClick = () => {
    setDropdown(!dropdown);
  };

  return (
    <>
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        onSearch={onSearch}
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        open={dropdown}
        onDropdownVisibleChange={handleClick}
        dropdownRender={(menu) => (
          <div>
            {menu}
            <Button onClick={handleClick}>Close</Button>
          </div>
        )}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="tom">Tom</Option>
      </Select>
    </>
  );
};

ReactDOM.render(<SelectSizesDemo />, document.getElementById("container"));

Runnable version

【讨论】：

我没有在示例中包含它，但我没有关闭按钮，而是有一个指向另一个页面的链接。当我单击按钮时，导航栏应该关闭。在示例中，您给出的导航栏在单击按钮时不会关闭
点击关闭按钮时下拉菜单应该关闭
当你点击item而不是Button时，你需要改变你的组件变量，换句话说，你需要使用onDropdownVisibleChange={handleClick}。我更新代码
还有一点，handleClick 在单击选择时被调用，而不仅仅是关闭按钮。有没有办法只在点击关闭btn时调用它或确定它是否从btn调用？
onDropdownVisibleChange 需要更改您的局部变量，因为您的组件不仅可以从按钮关闭。但我认为可以，可以在函数中添加参数方法