代码之家 › 专栏 › 技术社区 › one-hand-octopus

如何在单击时设置当前参考?

reactjs javascript

one-hand-octopus · 技术社区 · 4 年前

编辑:点击“打开”时应该显示/隐藏“Hi”,所以基本上点击“打开”等同于点击“Hello”,对不起。

我有一个 <details> <p> 元素,我要做的是单击 <Menu /> <Details /> 组件打开和关闭(单击“Hello”时显示/隐藏“Hi”)。以下是我尝试过的代码:

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

const Menu = ({ toggleDetails }) => {
  return (
    <div>
      <p onClick={toggleDetails}>Open</p>
    </div>
  );
};

const Details = (isOpen) => {
  const detailsRef = useRef();
  // detailsRef.current.open = isOpen;
  return (
    <details ref={detailsRef}>
      <summary>Hello</summary>
      <div>Hi</div>
    </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"));

代码沙盒: https://codesandbox.io/s/react-playground-forked-25ott?file=/index.js

我觉得我很接近,在改变 isOpen 状态下,详细信息组件将重新呈现,我希望切换 detailsRef.current.open true 或 false detailsRef.current undefined 因此,注释行不起作用,我如何实现这一点?

1 回复 | 直到 4 年前

Seth Lutske 4 年前

如果你的意思和我想你说的“打开和关闭细节”一样,那你就是在寻找一个 conditional render :

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

Details 需要 isOpen

要在单击hello时切换hi的可见性,请执行相同的操作:

const Details = (isOpen) => {
  const [showHi, setShowHi] = useState(true)

  return (
    <details>
      <summary onClick={() => setShowHi(!showHi)}>Hello</summary>
      {showHi && <div>Hi</div>}
    </details>
  );
};

推荐文章