在React中單擊另一個按鈕時如何隱藏按鈕？-有解無憂

我在頁面上顯示了 2 個按鈕Display和Hide. 單擊按鈕時，Hide我想隱藏Display按鈕。

我正在使用useState. 在某種程度上，我able to hide Display more text出現在按鈕上，但不是整個按鈕

初始狀態 - https://ibb.co/jMdH3tq

單擊隱藏按鈕時，顯示文本消失但按鈕保持不變 - 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>;

uj5u.com熱心網友回復：

如果您嘗試隱藏按鈕，請執行以下操作：我注意到顯示狀態最初設定為 false，而您在單擊時將其設定為 true。選擇按鈕時，您是否想要相反的初始狀態隱藏？

在此基礎上，相應地調整 show 或 show 或 !show

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

uj5u.com熱心網友回復：

一種更簡潔的方法是將三元運算子與您的狀態一起使用。每次單擊按鈕時，它們都會反轉更改在 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>
  );
}

uj5u.com熱心網友回復：

如果您不想重新渲染，可以通過使用如下類來實作：

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>
  )
}

樣式.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425258.html

標籤：javascript 反应按钮显示隐藏

上一篇：使用按鈕停止setInterval函式

下一篇：AndroidStudio：在視圖類上定義的android:onClick屬性的父或祖先背景關系中找不到方法XXXXX(View)