在 React JS 中使用按钮和键盘更新输入字段的值

Question

以下是我的反应代码:

export default function Counter() {
const [count, setcount] = useState(0);
const increase = () => {setcount(count + 1)};
const decrease = () => {setcount(count - 1)};
const manual = (event) => {setcount(event.target.value)}
return (
<div>
<div>
<button onClick={increase} className='bg-green-700 w-12 border-2'>+</button>
<input onKeyUp={(event) => {manual}} onChange={setcount} value={count} className='border-2 text-center' type="number" name="count" id="count" />
<button onClick={decrease} className='bg-rose-700 w-12 border-2'>-</button>
</div>
</div>
)
}

我想通过按钮更新输入字段，以及使用键盘手动更新输入字段。

Answer 1

你需要传递圆括号给你的函数:

<input onKeyUp={(event) => manual(event)} onChange={setcount} value={count} className='border-2 text-center' type="number" name="count" id="count" />

Answer 2

目前，如果你想增加计数值每onKeyUp，你可以通过使用window.addEventListener("keydown"， handleKeyPress)

const [count, setcount] = useState(0);
const increase = () => {
setcount(count + 1);
};
const decrease = () => {
setcount(count - 1);
};
const handleKeyPress = useCallback(
(event) => {
setcount(count + 1);
},
[count]
);
useEffect(() => {
window.addEventListener("keydown", handleKeyPress);
return () => {
window.removeEventListener("keydown", handleKeyPress);
};
}, [handleKeyPress]);
return (
<div>
<div>
<button onClick={increase} className="bg-green-700 w-12 border-2">
+
</button>
<input
onChange={setcount}
value={count}
className="border-2 text-center"
type="number"
name="count"
id="count"
/>
<button onClick={decrease} className="bg-rose-700 w-12 border-2">
-
</button>
</div>
</div>
);