在 React 中单击另一个按钮时如何隐藏按钮？

Question

我在页面上显示了 2 个按钮 Display 和 Hide。单击 Hide 按钮时，我想隐藏 Display 按钮。

我正在使用 useState。在某种程度上，我able to hide Display more text出现在按钮上，但不是整个按钮

单击隐藏按钮时，显示文本消失但按钮保持不变- https://ibb.co/Jm5FPNy

const [show, setShow] = useState(false);

const hideButton = () => {
  setShow(true);
};

隐藏按钮代码：

<div>
  <button
    style={{ marginLeft: '190px' }}
    className="button button1"
    onClick={() => {
      clearBooks();
      hideButton();
    }}
  >
    Hide
  </button>
</div>;

显示按钮代码：

<button
  className="button button1"
  style={{ marginLeft: '190px', width: '124px', height: '50px' }}
  onClick={fetchBooks}
>
  {!show && 'Display more'}
</button>;

Answer 1

如果您试图隐藏按钮，请执行以下操作：我注意到显示状态最初设置为 false，而您在单击时将其设置为 true。选择按钮时是否希望相反，true 作为初始状态隐藏？

在此基础上，相应地调整 show 或 !show

{show &&
<button
    className="button button1"
    style={{ marginLeft: "190px", width: "124px", height: "50px" }}
    onClick={fetchBooks}
  >
  </button> 
}

Answer 2

一种更简洁的方法是对您的状态使用三元运算符。每次单击按钮时，它们都会反转状态，从而更改 DOM 中呈现的按钮。

import { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  function changeState() {
    setShow(!show);
  }

  return (
    <div className="App">
      {show ? (
        <button onClick={changeState}> Display </button>
      ) : (
        <button onClick={changeState}> Hide </button>
      )}
    </div>
  );
}

Answer 3

如果您不想 re-render，您可以使用类来实现，如下所示：

screen.js

import "./styles.css"

export default function MyScreen() {
  const onButtonPressed = (target) => {
    document.querySelector('button.hide').classList.remove('hide')
    target.classList.add('hide')
  }
  return (
    <div>
      <button
        style={{ marginLeft: 190 }}
        className="button button1 hide"
        onClick={(element) => {
          onButtonPressed(element.target)
          clearBooks()
        }}
      >
        {"Hide"}
      </button>
    </div>
    <div>
      <button
        className="button button1"
        style={{ marginLeft: 190, width: 124, height: 50 }}
        onClick={(element) => {
          onButtonPressed(element.target)
          fetchBooks()
        }}
      >
        {"Display more"}
      </button>
    </div>
  )
}

styles.css

button.hide {
  display: none;
}

这是一个测试 JS 功能的示例：

button.hide {
    display: none;
}

<div>
    <button
        class="button button1 hide"
        style="margin-left:190px;width:124px;height:50px"
        onClick="onButtonPressed(this)"
    >
        Hide
    </button>
</div>
<div>
    <button
        class="button button1"
        style="margin-left:190px;width:124px;height:50px"
        onClick="onButtonPressed(this)"
    >
        Display more
    </button>
</div>

<script>
    function onButtonPressed(element) {
        document.querySelector('button.hide').classList.remove('hide')
        element.classList.add('hide')
    }
</script>

在 React 中单击另一个按钮时如何隐藏按钮？

How to hide button when another button is clicked in React?

javascript

button

show-hide

reactjs