时间戳

首页 > 解决方案 > 如何在 React Hooks 中切换复选框值？

javascript - 如何在 React Hooks 中切换复选框值？

问题描述

我有一个输入类型checkbox如下：

const [is_checked,set_is_checked]= useState(false);

const toggle_payment = () => {
    set_is_checked(!is_checked);
    console.log(is_checked);
}


return(
    <div>
        <input checked={is_checked}  onChange={toggle_value} type="checkbox"/>
    </div>
)

问题

这似乎工作正常，但是当我console.log(is_checked)看起来它打印以前的值时。我都尝试了onChange，onClick但得到了相同的结果。让我感到困惑的是，checkbox每次单击该框时都会选中/取消选中，但console.log打印的值与预期打印的值不同，例如当我单击鼠标选中该框时，该框已选中但console.log打印false

标签： javascriptreactjscheckboxreact-hooks

解决方案

使用 useState hook 提供的 updater 进行状态更新是异步的，不会立即反映和更新，而是会触发重新渲染

我认为如果你在函数之外使用 console.log() 你可能会看到 is_checked 的变化

推荐阅读