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

Question

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

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

如果 true (1) 和 false (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);
        }
    }

Answer 1

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

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

“value”将输入绑定(bind)到状态字段inputValue，该状态字段由handleChange更改。控制inputValue的值来控制输入字段中显示的内容。