如何使用 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()}