React js - 显示或隐藏 div

Posted 2023-02-22

【中文标题】React js - 显示或隐藏 div

【英文标题】：React js - Show or hide a div

【发布时间】：2020-08-31 22:48:50

【问题描述】：

我正在尝试使用 CSS 样式选项中的状态值在 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 文件中使用这个隐藏组件。当我单击按钮时，分配了新状态，但随后页面重新呈现，并且几乎立即再次加载初始状态。如何确保保持新状态？最终我将创建一个函数，如果 div 显示与否基于先前的状态。

【问题讨论】：

这能回答你的问题吗？ react conditionally render JSX

为相同添加了一个 sn-p .....

你可以看看here

【参考方案1】：

更好的实现是让您的状态变量 TRUE/FALSE 值并基于它使用conditional rendering 显示元素，请注意按钮处理程序中的e.preventDefault 以停止刷新/重定向，这是一个有效的 sn- p，也是codesandbox：

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>

【参考方案2】：

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

Can I make a <button> not submit a form?

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

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;

【参考方案3】：

您的代码应该是这样的，而不是使用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