React js - 显示或隐藏 div

Question

我正在尝试使用 CSS 样式选项中的 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;

然后我在我的App.js文件中使用这个隐藏组件。 当我单击按钮时，分配了新的 state，但随后页面重新呈现，并且几乎立即再次加载初始 state。 如何通过确保保留新的 state 来实现 go？ 最终，我将创建一个 function，其中是否显示 div 基于之前的 state。

Answer 1

问题是按钮位于<form>内。 因此，单击该按钮将提交表单并刷新页面。

我可以让 <button> 不提交表单吗？

您需要将type="button"添加到您的<button>

import React, { useState } from "react";

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

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

  return (
    <form>
      <button
        type="button"
        onClick={() => setDp(!dp)}
      >
        Test
      </button>
      {dp && <div>Test</div>}
    </form>
  );
}

export default Hide;

Answer 2

您的代码应该是这样的，而不是使用block和none作为样式，我们可以使用条件 JSX（这是更理想的方法）-：

function Mycomp(){
    const[dp, toggleDp] = useState(false);

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

export default hide

Answer 3

更好的实现是让您的 state 变量 TRUE/FALSE 值并基于它使用条件渲染显示元素，请注意按钮处理程序中的e.preventDefault以停止刷新/重定向，这是一个工作片段，也是一个代码框：

 const { useState, useEffect } = React; function App() { return ( <div> <Mycomp /> </div> ); } function Mycomp() { const [dp, setDp] = useState(true); return ( <form> <button onClick={(e) => { e.preventDefault(); setDp(;dp); }} > Test </button> {dp && <div>Test</div>} </form> ). } ReactDOM,render(<App />. document;getElementById("react-root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react-root"></div>