我對使用 React 鉤子的 onClick 事件有疑問。我實際上希望文本在用戶單擊時更改為另一個文本，當用戶再次單擊時，它會回傳到第一個文本。例如，用戶單擊文本“Change First”，然后文本更改為“Change Second”。然后，如果用戶單擊“Change Second”，則文本變為“Change First”。只要用戶單擊文本，它就會改變。
這是我的 useState 函式：
const [shopStat, setshopChange] = useState("Change first");
以下是我要更改文本的部分：
<div className="featuredItem">
<span className="featuredTitle">Your text is</span>
<div className="featuredMoneyContainer">
<span
className="featuredMoney"
style={{ color: green }}
onClick={() => setshopChange("Change second")}
>
{shopStat}
</span>
</div>
</div>
但是，上面的代碼只將文本更改為“第二次更改”，我無法再次單擊該文本將其更改回“首先更改”。希望大家能幫幫我。謝謝你。
uj5u.com熱心網友回復：
設定狀態函式接受當前狀態作為引數，因此您可以這樣使用它。
onClick={() => setshopChange((currentState) => currentState === "Change second" ? "Change First" : "Change second" )}
uj5u.com熱心網友回復：
import React, {useState} from 'react';
import './App.css';
function App() {
const [shopStat, setshopChange] = useState(true);
return (
<main onClick={() => setshopChange(!shopStat)}>
{shopStat === true ? "Change first" : "Change second"}
</main>
);
}
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447825.html
標籤：javascript 反应 反应钩子
上一篇：在React中將數字作為道具傳遞成為Object物件
下一篇：將JSON轉換為無鍵陣列