对 Blur 未被调用做出反应

Question

我不确定，但 onblur 似乎不适合我。

这就是我拥有的组件

export default function Dropdown({
  onChange,
  value,
  placeholder,
  options,
  error,
}) {
  const [showOptions, setShowOptions] = useState(false);

  const hideDropdown = () => {
    console.log("Hello");
    if (showOptions) {
      setShowOptions(false);
    }
  };
  useEffect(() => {
    if (showOptions) {
      hideDropdown();
    }
  }, [value]);
  return (
    <DropdownMain>
      <div onClick={() => setShowOptions(!showOptions)} onBlur={hideDropdown}>
        <Select>
          {value !== null ? _.find(options, { value }).label : placeholder}
        </Select>
      </div>
      <SelectIndicator></SelectIndicator>
      {showOptions &&
        (options || []).map((option, indez) => (
          <Option
            onClick={() => onChange(option.value)}
            key={`dropdownOption${indez}`}
          >
            {option.label}
          </Option>
        ))}
    </DropdownMain>
  );
}

我预计当用户点击其他地方时它会失去焦点并且下拉菜单应该关闭，为此我正在使用 onBlure 但这似乎不起作用。关于如何修复它有什么想法吗？

Answer 1

这里的问题是您添加了 onBlur 的 div 永远不会获得焦点。这会导致 onBlur 根本不会被触发，因为 onBlur 仅在元素失去焦点时才会触发。尝试在接收焦点的实际组件上添加 onBlur。