时间戳

首页 > 解决方案 > 更新期间控制复选框的最佳方法 | 反应JS

javascript - 更新期间控制复选框的最佳方法 | 反应JS

问题描述

假设我有一个表格要发布。它有复选框。（布尔类型，接收 0 和 1 ）。创建逻辑如下。

 "is_has_n": values.is_has_n === true ? 1 : 0,

如果为真 (1) 和假 (0)，则返回值 1 和 0。在我创建这篇文章时，它可以正常工作。如果我想编辑这篇文章，我会遇到一些问题。所以这个复选框以前是真的，现在对我来说应该是假的。所以我可以在编辑帖子时取消选中该复选框。我有以下表格：

{
data.is_has_n === 1 ?
 (
    <Form.Check
        onChange={handleChange}
        name="is_has_n"
        defaultChecked={true}
        isInvalid={touched.is_has_n&& !!errors.is_has_n}
        type="checkbox"
        label="Label 
    />
) :
(
    <Form.Check
        onChange={handleChange}
        name="is_has_n"
        defaultChecked={false}
        isInvalid={touched.is_has_n&& !!errors.is_has_n}
        type="checkbox"
        label="Label
    />
 )

如果我想将 true 复选框设置为 false，那就是我现在的情况。所以我想在更新 psot 期间保持它处于未选中状态。我是说。在提交数据之前，我可以做些什么来检查我的控制方式是选中还是取消选中？还应该考虑有几个错误按下的复选框。我也想过做一个名为 isChecked 的方法，但我认为这不是一个解决方案。因为在保存之前可能会多次按下复选框。

已编辑 | 固定 我找到了解决方案：我确实喜欢这样：

const [IsDangerous, setIsDangerous] = useState(data.dangerous_status === 1 ? true : false);

还有我的手柄更换功能

if (name === "dangerous_status") {
        console.log(isChecked);
        setFieldValue(name, isChecked);
        if (isChecked) {
            console.log("dangerous_status", true);
            setIsDangerous(true);
        } else {
            setIsDangerous(false);
            console.log("dangerous_status", false);
        }
    }

标签： javascriptreactjscheckbox

解决方案

这个问题似乎还不清楚，但我认为你应该使用受控组件，从而用状态控制输入字段值。请参阅https://reactjs.org/docs/forms.html。

<input type="checkbox" value={this.state.inputValue} onChange={this.handleChange} />

“value”将输入绑定到由 handleChange 更改的状态字段 inputValue。控制 inputValue 的值以控制在输入字段中显示的内容。

推荐阅读