时间戳

首页 > 解决方案 > React js - 显示或隐藏 div

javascript - React js - 显示或隐藏 div

问题描述

我正在尝试使用 CSS 样式选项中的状态值在 Reactjs 中显示或隐藏 div - display 并且我正在使用带有钩子的函数。我有一个按钮，按钮下方是一个 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 显示与否基于先前的状态。

标签： javascripthtmlcssreactjsreact-hooks

解决方案

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

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

您需要在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;

推荐阅读