Javascript React js-显示或隐藏div

我试图使用CSS样式选项-display中的state值在Reactjs中显示或隐藏一个div，并且我正在使用带有钩子的函数。我有一个按钮，按钮下面有一个div。当我单击按钮时，我想隐藏或显示div中的内容，取决于它当前是显示还是隐藏

这是我的基本测试代码

import React, { useState } from "react";

function hide() {
  return (
    <div>
      <Mycomp />
    </div>
  );
}

function Mycomp() {
  const [dp, setDp] = useState("none");

  return (
    <form>
      <button
        onClick={() => {
          setDp("block");
        }}
      >
        Test
      </button>
      <div style={{ display: dp }}>Test</div>
    </form>
  );
}

export default hide;

import React，{useState}来自“React”；
函数hide（）{
返回(
);
}
函数mycop（）{
const[dp，setDp]=useState（“无”）；
返回(
{
setDp（“块”）；
}}
>
试验
试验
);
}
导出默认隐藏；

---

然后在我的

App.js

文件中使用这个隐藏组件。当我点击按钮时，新的状态被分配，但随后页面重新呈现，初始状态几乎立即再次加载。我如何确保新的状态得以保持？最后，我将创建一个函数，其中div是否显示取决于之前的状态。

您的代码应该是这样的，而不是使用

块

和

无

作为样式，我们可以使用条件JSX（这是更理想的方法）——：

函数mycop（）{
const[dp，toggleDp]=useState（false）；
返回(
{toggleDp（！dp）}>测试
{dp&&Test}
)
}
导出默认隐藏

问题是按钮在

中。因此，点击该按钮将提交表单并刷新页面

您需要将

type=“button”

添加到

import React，{useState}来自“React”；
导入“/styles.css”；
函数Hide（）{
返回(
);
}
函数mycop（）{
const[dp，setDp]=useState（“无”）；
返回(
{
setDp（“块”）；
}}
>
试验
试验
);
}
导出默认隐藏；

更好的实现方法是让状态变量TRUE/FALSE值，并在此基础上使用按钮处理程序中的注释显示元素，以停止刷新/重定向，这是一个工作片段，也是一个：

const{useState，useffect}=React；
函数App（）{
返回(
);
}
函数mycop（）{
const[dp，setDp]=useState（true）；
返回(
{
e、 预防默认值（）；
setDp（！dp）；
}}
>
试验
{dp&&Test}
);
}
render（，document.getElementById（“react root”）

这是否回答了您的问题？添加了相同的代码片段…您可以查看
function Mycomp(){
    const[dp, toggleDp] = useState(false);

    return(
        <form>
            <button onClick={()=>{toggleDp(!dp)}}>Test</button>
            {dp && <div>Test</div>}
        </form>
    )
}

export default hide

import React, { useState } from "react";
import "./styles.css";

function Hide() {
  return (
    <div>
      <Mycomp />
    </div>
  );
}

function Mycomp() {
  const [dp, setDp] = useState("none");

  return (
    <form>
      <button
        type="button"
        onClick={() => {
          setDp("block");
        }}
      >
        Test
      </button>
      <div style={{ display: dp }}>Test</div>
    </form>
  );
}

export default Hide;