如果选中复选框，则 ReactJS 禁用表单

Question

我有一个复选框。如果选中该复选框，则表单应关闭。但这对我不起作用。我有以下代码：

const [IsChacked, setIsChacked] = useState(false);

const onChangeParams = (name, setChackedValue, defaultChecked) => {
    if (name === "foreign_citizen") {
        let value = defaultChecked.target.value;           
        setChackedValue(name, value)
        if (parseInt(value) === 1) {
            setIsChacked(true);
        }
    }
};

我的表格是这样的：

<Form.Check
  onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))}
  name="foreign_citizen"
  defaultChecked={values.foreign_citizen}
  isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
  type="checkbox"
  label="Наличие паспорта в деле"   />



{IsChacked ? (< > Dos something here</>) : ( <></>)}

如果我选中复选框，则会出现类似错误： TypeError：无法读取未定义的属性“目标”

那么我哪里错了？我不理解...

Answer 1

onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))}这里的事件对象是第二个参数

const onChangeParams = (name, setChackedValue, defaultChecked) => {
    if (name === "foreign_citizen") {
        let value = defaultChecked.target.value; 

但上面的事件对象是第三个参数

尝试改变 onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}

您还必须将表单包含在 Fragment 中

 return (
    <>
      <Form.Check
        onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}
        name="foreign_citizen"
        defaultChecked={values.foreign_citizen}
        isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
        type="checkbox"
        label="Наличие паспорта в деле"
      />
      {IsChacked ? <> Dos something here</> : <></>}
    </>
  );

类似的代码框 - https://codesandbox.io/s/pedantic-blackwell-e7uhy