Reactjs node.current不是一个函数

我试图在单击“外部”时创建函数关闭模式，但我不断收到以下错误：

TypeError:node.current不是函数

以下是我在MemberCard.js中的代码：

const [modalStatus, setModalStatus] = useState(false);
  const node = useRef(null);

  const openModal = () => {
    setModalStatus(!modalStatus);
  };
  const handleClick = (e) => {
    if (node.current(e.target)) {
      return;
    }
    // outside click
    setModalStatus(false);
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  }, []);

return (
    <div className="member-card">
        <div className="member-edit" onClick={openModal}>
          <Symlink />
        </div>
        {modalStatus && (
          <TeamStatusModal
            active={modalStatus}
            ref={node}
            tab={tab}
            member={member}
          />
        )}
    ...
    }

const[modalStatus，setModalStatus]=useState（false）；
const node=useRef（null）；
常量OpenModel=（）=>{
setModalStatus（！modalStatus）；
};
常量handleClick=（e）=>{
if（当前节点（如目标节点））{
返回；
}
//外部点击
setModalStatus（假）；
};
useffect（（）=>{
文件。添加的列表（“鼠标向下”，handleClick）；
return（）=>{
文件。删除EventListener（“鼠标向下”，handleClick）；
};
}, []);
返回(
{modalStatus&&(
)}
...
}

以下是单击后打开的模式：

const TeamStatusModal = (props) => {
  const { active, tab, member, ref } = props;
  console.log(ref);
  return (
    <div
      className={`team-status-modal-container ${active ? "ACTIVE_CLASS" : ""}`}
    >
      <button className="status">
        <ProfileIcon /> <span>View Profile</span>
      </button>
      <hr />
      <button className="status">
        <MessageIcon /> <span>Message Me</span>
      </button>
    </div>
  );
};

const TeamStatusModal=（道具）=>{
const{active，tab，member，ref}=props；
控制台日志（ref）；
返回(
视图配置文件

给我留言
);
};

---

如何实现此功能？

在react中，有一些很好的库可以帮助您使用modals，其中一个叫做，您可以检查一下

如果您想自己实现一个模式，我们可以遵循以下步骤

• 首先，我们需要定义一个上下文，因为模式状态需要由应用程序中的多个组件或页面访问
• 在上下文中，您可以将模式存储在

  ismodalpen

  状态中，并添加函数来操作它，例如

  openModal

  和

  closeModal

  。这实际上取决于要添加到此实现中的功能的数量
• 最后，围绕提供商包装应用程序，使上下文可以全局访问

示例实现

const ModalContext=createContext（{}）
导出常量ModalContextProvider=（{children}）=>{
常量[isModalOpen，setIsModalOpen]=useState（false）
常量toggleModalState=（）=>{
setIsModalOpen（状态=>！状态）
}
返回{children}
}
导出常量useModal=（）=>{
返回useContext（ModalContext）
}

---

现在模态将在全球范围内可用。current不是一个函数，您不能用一些参数和所有这些东西调用它。useRef的函数目标是引用

current

方法中的HTML元素。例如，如果ref与HTML输入元素相关，则当前属性将是pop使用诸如

focus（）

等方法进行计算，所以我应该去掉useRef，实现它的方法是使用css focus（）进行工作？你的主要目标是能够打开和关闭模式，对吗？我会写一个更详细的答案谢谢你，我真的很感激，我很乐意帮助你，如果你有更多疑问，可以自由提问：）