javascript - 如何管理单击事件以显示/隐藏 React 中的某些元素？

Question

这个周末，我尝试使用 React 自己构建一个 Search 组件。在此之前，我需要构建一个 input select 组件，但我决定使用 Div 从头开始​​构建它，因为我需要对其应用我自己的样式。当我点击 Div 时，我将显示一些项目的列表。如果我在该列表 项目之外单击，它可能会被隐藏。此外，当我再次单击 Div 时(当 list 项目打开时)，我也想隐藏该 list 项目。但它不起作用。我正在使用此代码。

import { useState, useRef, useEffect } from 'react';

function useVisible(initialIsVisible = false) {
  const [isVisible, setIsVisible] = useState(initialIsVisible);
  const ref = useRef(null);

  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClickOutside, true);
    return () => {
      document.removeEventListener('click', handleClickOutside, true);
    };
  }, []);

  return { ref, isVisible, setIsVisible };
}

export default useVisible;

嘿，Nemanja Lazarevic

这里是:

import React from 'react';
import useVisible from './useVisible';

// In the component
const { ref, isVisible, setIsVisible } = useVisible();

// In return
<div onClick={setIsVisible}>
  Select items
</div>
{isVisible && (
  <div ref={ref}>
    // list items here
  </div>
)}

Answer 1

我在ant design中使用modal来显示或隐藏元素，你可以看这个例子

{isVisible && (
      <Modal
        visible={isVisible}
        onOk={() => handleVerifyOkButton()}
        onCancel={() => setIsVerify(false)}
      >
       List Item
      </Modal>
    )}