React js - 显示或隐藏 div答案

【问题标题】：React js - Show or hide a divReact js - 显示或隐藏 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

标签： javascript html css reactjs react-hooks

【解决方案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

【讨论】：