时间戳

首页 > 解决方案 > 如何使单击锚点等同于单击详细信息标签？

javascript - 如何使单击锚点等同于单击详细信息标签？

问题描述

我有一个<details>标签，点击它会切换一些内容。现在我<a>在它下面有一个标签，点击<a>标签我想切换相同的内容，即点击<a>应该等同于点击<details>。这是我尝试过的代码片段：

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Menu = ({ toggleDetails }) => {
  return (
    <div>
      <a href="/#" onClick={toggleDetails}>
        Open
      </a>
    </div>
  );
};

const Details = (isOpen) => {
  return (
    <details>
      <summary>Hello</summary>
      {isOpen ? <div>Hi</div> : null}
    </details>
  );
};

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleDetails = () => {
    setIsOpen(isOpen ? false : true);
  };
  return (
    <div>
      <Details isOpen={isOpen} />
      <Menu toggleDetails={toggleDetails} />
    </div>
  );
};

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

在这里点击“你好”，它会切换“你好”。我想在点击“打开”时做同样的事情，即切换“嗨”。我该怎么做？条件渲染不起作用。我应该使用 ref 来访问<details>标签的“打开”属性吗？

编辑：

我也尝试了如下的 ref 解决方案，但它没有用：

const Details = (isOpen) => {
  const detailsRef = useRef();
  // detailsRef.current.open = isOpen
  return (
    <details ref={detailsRef}>
      <summary>Hello</summary>
      <div>Hi</div>
    </details>
  );
};

标签： javascriptreactjs

解决方案

我假设您正在尝试使用 details 标签的本机切换功能。为此，您需要通过open属性控制打开/关闭状态。然后，您应该使用该onToggle事件来检测单击摘要元素的时间，这样您就可以使组件的状态与实际 DOM 保持同步。

const Menu = ({ setIsOpen }) => {
  return (
    <div>
      <a
        href="#"
        onClick={() => {
          setIsOpen((prev) => !prev);
        }}
      >
        Open
      </a>
    </div>
  );
};

const Details = ({ isOpen, setIsOpen }) => {
  return (
    <details
      open={isOpen}
      onToggle={(event) => {
        setIsOpen(event.target.open);
      }}
    >
      <summary>Hello</summary>
      <div>Hi</div>
    </details>
  );
};

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Details isOpen={isOpen} setIsOpen={setIsOpen} />
      <Menu setIsOpen={setIsOpen} />
    </div>
  );
};

推荐阅读