import React from "react";
import { AiOutlineArrowDown, AiOutlineArrowUp } from "react-icons/ai";
import { useState } from "react";
const Vote = () => {
const [num, setnum] = useState(0);
const numdown = () => {
num != 0 ? setnum(num - 1) : setnum(num);
};
const numup = () => {
num < 9 ? setnum(num 1) : setnum(num);
};
const [num2, setnum2] = useState(0);
const numdown2 = () => {
num2 != 0 ? setnum2(num2 - 1) : setnum(num2);
};
const numup2 = () => {
num2 < 9 ? setnum2(num2 1) : setnum2(num);
};
var value1 = (
<>
<AiOutlineArrowDown onClick={numdown} />
{num}
<AiOutlineArrowUp onClick={numup} />
</>
);
var value2 = (
<>
<AiOutlineArrowDown onClick={numdown2} />
{num2}
<AiOutlineArrowUp onClick={numup2} />
</>
);
return (
<>
{value1}
{value2}
</>
);
};
export default Vote;
（在上面的代碼中，我撰寫了一個代碼模板來形成一個投票區域，其中包含兩個具有遞增和遞減函式的投票值。投票值介于 0 到 9 之間，如兩個三元運算子函式中所述）！！！如何縮小此代碼成一個狀態函式和 inreement 和 decrement 函式具有相同的作業？？？？？？
uj5u.com熱心網友回復：
這是個好問題。基本上，您可以使用自定義掛鉤處理所有重復的邏輯。
你可以在這里看到一個活生生的例子：
uj5u.com熱心網友回復：
我認為你看起來像這樣：
應用程式.js
import { useState } from "react";
export default function App() {
let [data, setData] = useState(0);
const handleData = (type) => () => {
setData((prvState) => {
return type === "up" ? prvState : --prvState;
});
};
return (
<div>
<button onClick={handleData("up")} style={{ marginRight: "5px" }}>
Up
</button>
{data}
<button onClick={handleData("down")} style={{ marginLeft: "5px" }}>
Down
</button>
</div>
);
}
如果您多次想要相同的東西，那么您可以創建一個組件并相應地修改此代碼。
在我提供的沙箱中運行代碼以供玩耍。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506755.html
標籤：javascript 反应 npm 反应钩子