如何使用 useState 在 React 中更改按鈕文本

Question

我有一個帶有 Text Click View Price的按鈕。 單擊按鈕時，我正在顯示Amount 。

我想將按鈕值更改為priceVar = "Reset Price"; 這在我的情況下沒有發生。 我可以將值設置為 0。

如何將按鈕文本再次設置為Reset Price ？

 const [price, setPrice] = useState(0);
  let priceVar = "Click View Price";
  const viewPrice = () => {
    if (price === 0) {
      setPrice(Math.floor(Math.random() * 100));
    } else {
      priceVar = "Reset Price"; --------------------> NOT WORKING
      setPrice(0);
    }
  };

  return (
    <article
      className="book"
      onMouseOver={() => {
        console.log(title);
      }}
    >
      <div>
        <button type="button" onClick={viewPrice()}>
          {priceVar}
        </button>
        <h3>${price}</h3>
      </div>
    </article>
  );

Answer 1

您可以為按鈕文本創建useState hook ，如下所示

 const [priceVar, setpriceVar] = useState("Click View Price");

 const viewPrice = () => {
    if (price === 0) {
      setpriceVar("Click View Price");
      setPrice(Math.floor(Math.random() * 100));
    } else {
      setpriceVar("Reset Price");
      setPrice(0);
    }
  };

Answer 2

你的變量不是反應狀態！

 import { useState } from "react"; let priceVar = "..."; // Try useState like with your price variable: const [priceVarNew, setPriceVarNew] = useState("Click View Price") // Then reference that state like your price with: {priceVar}, or change it accordingly with setState("Reset Price")

Answer 3

您也可以為此制作三元。 setPrice(price === 0? Math.floor(Math.random() * 100): 0);

Answer 4

你幾乎擁有它！

您當前的代碼具有以下流程：

• 聲明priceVar
• 聲明 function 可以做一些事情（包括根據需要更改按鈕文本變量）
• 使用具有 onclick 的按鈕渲染組件，這是您聲明的 function

在 React 中，組件的渲染（更新）由 props 或 state 更改觸發，在這種情況下，您的按鈕文本不是由 state 直接觸發的。 setPrice確實觸發了重新渲染，這幾乎間接地是您想要的，但是因為您在組件頂部聲明了文本，所以您只是要求您的組件再次呈現相同的文本，因此沒有更改。

有很多方法可以實現這一目標。 但是在您的情況下，當您的priceVar可變price等於 0 時，您似乎希望您的按鈕文本為Reset Price文本。 如下圖所示：

    <button type="button" onClick={viewPrice()}>
      {price === 0 ? "Reset Price" : "Click view price"}
    </button>

有一些方法可以清理它或更優雅，但這里要注意的重要一點是，你依賴於一些反應 state，這在組件 UI 需要隨不同情況發生變化的場景中至關重要。

Answer 5

您非常接近，您只需要了解您無法使用let或const創建有狀態的值。 這就是為什么我們有像useState 、 useRef 、 useReducer等這樣的設置器，它們在渲染中保持它們的值。 標准變量不會按您預期的方式工作。

因此，您可以選擇通過替換來創建一個新的 state：

let priceVar = "Click View Price";

和：

const [priceVar, setPriceVar] = useState("Click View Price");

並相應地更新它。

或者，閱讀本文以了解何時應該派生 state，而不是同步它。

在您的情況下，該行：

let priceVar = "Click View Price";

將被替換為：

const priceVar = price === 0 ? "Click View Price" : "Reset Price";

在這里查看。

另外作為旁注，您在組件呈現后立即調用viewPrice function，這不是您想要做的。 這是有道理的，因為如果您要在原版 JavaScript 中調用 function，您將遵循以下模式： someFunction()並期望它被調用。

相反，將您的 onClick 處理程序替換為：

onClick={viewPrice}

或者：

onClick={() => viewPrice()}