我有一個帶有 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>
);
uj5u.com熱心網友回復：
您可以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);
}
};
uj5u.com熱心網友回復：
你幾乎擁有它！
您當前的代碼具有以下流程：
- 宣布
priceVar - 宣告做一些事情的函式（包括根據需要更改按鈕文本變數）
- 使用具有 onclick 的按鈕渲染組件，這是您宣告的函式
在 React 中，組件的渲染（更新）是由 props 或狀態更改觸發的，在這種情況下，您的按鈕文本不是由狀態直接觸發的。setPrice確實會觸發重新渲染，這幾乎間接地是您想要的，但是因為您在組件頂部宣告了文本，所以您只是要求您的組件再次渲染相同的文本，因此沒有更改。
有很多方法可以實作這一目標。但是在您的情況下，您似乎希望您的按鈕文本Reset Price在您的狀態變數price等于 0 時出現。因此，priceVar您可以簡單地在您想要決定按鈕文本的位置檢查價格，而不是使用 a。如下圖所示：
<button type="button" onClick={viewPrice()}>
{price === 0 ? "Reset Price" : "Click view price"}
</button>
有一些方法可以清理它或更優雅，但這里要注意的重要一點是，你依賴于一些反應狀態，這在這樣的場景中至關重要，你的組件 UI 需要隨著不同的情況而改變。
uj5u.com熱心網友回復：
你的變數不是反應狀態！
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")uj5u.com熱心網友回復：
您非常接近，您只需要了解您無法使用letor創建有狀態值const。這就是為什么我們有像useState,等這樣的設定器useRef，它們在渲染中保持它們的值。標準變數不會按您預期的方式作業。useReducer
因此，您可以選擇通過替換來創建一個新的狀態：
let priceVar = "Click View Price";
和：
const [priceVar, setPriceVar] = useState("Click View Price");
并相應地更新它。
或者，閱讀本文以了解何時應該派生狀態，而不是同步狀態。
在您的情況下，該行：
let priceVar = "Click View Price";
將被替換為：
const priceVar = price === 0 ? "Click View Price" : "Reset Price";
在這里查看。
另外作為旁注，您在viewPrice組件呈現后立即呼叫該函式，這不是您想要做的。這是有道理的，因為如果您要在 vanilla JavaScript 中呼叫一個函式，您將遵循以下模式：someFunction()并期望它被呼叫。
相反，將您的 onClick 處理程式替換為：
onClick={viewPrice}
或者：
onClick={() => viewPrice()}
uj5u.com熱心網友回復：
您也可以為此制作三元。
setPrice(price === 0 ? Math.floor(Math.random() * 100) : 0);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/421953.html
標籤：
上一篇：WPF.NET5(XAML)當我按下按鈕時添加一些標簽
下一篇：單擊按鈕時使標題消失