我有一个 React next.js 项目和一个表单。我想在我的表单中使用 slider 。顺便说一句,我使用语义 ui react 。我有一个具有以下输入的 useState Hook :
function CreateTicket() {
const [ticket, setTicket] = useState({
name: "",
description: "",
media: "",
priority: false
});
....
还有一个 handleChange、handleSubmit 和一个 handleToggle 函数。当我在 console.log 中提交表单时,它不会将优先级的值设置回 false。
<Checkbox
style={{ padding: "1rem" }}
label="Important?"
name="priority"
toggle
onChange={handleToggle}
/>
const handleToggle = event => {
let { priority } = event.target;
setTicket(prevState => ({ ...prevState, priority: !priority }));
};
控制台日志 ->
页面刷新后:
{name: "", description: "", media: "", priority: false}
之后:切换
{name: "", description: "", media: "", priority: true}
第二次切换后
{name: "", description: "", media: "", priority: true}
我做错了什么?
最佳答案
你需要解构priority
来自 prevState
, 不是 event.target
:
const handleToggle = event => {
setTicket(({ priority, ...prevState }) =>
({ ...prevState, priority: !priority })
);
};
作为优化,您可以内存 handleToggle
与 useCallback()
这样<Checkbox/>
不需要每次状态更新时都重新渲染:
const handleToggle = useCallback(event => {
setTicket(({ priority, ...prevState }) =>
({ ...prevState, priority: !priority })
);
}, [setTicket]);
关于reactjs - 使用 bool 值的 useState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58961954/