时间戳

首页 > 解决方案 > 取消选中复选框重置输入（ReactJS + Formik）

reactjs - 取消选中复选框重置输入（ReactJS + Formik）

问题描述

如果选中了一个复选框，我制作了这个组件来创建一个字段，但是如果我写了一些东西然后取消选中，我该如何重置这个字段值？

const InputCheckbox = ({name, size}) => {
  const [checkAmount, setCheckAmount] = useState(false);

  return(
    <div>
    <label htmlFor={size}>
      <Field type="checkbox" name={name} value={size} onClick={()=> {checkAmount === false ? setCheckAmount(true) : setCheckAmount(false)}} />
      {size}
    </label>
    {checkAmount === false ? null : <div className="form-control-amount">
      <label htmlFor={`sizeamount.${size}`}>{size}</label>
      <Field className="form-control-amount" type="number" name={`sizeamount.${size}`} />
      </div>}
    </div>
)
}

标签： reactjsformik

解决方案

当复选框未选中时，您可以使用 Formik 的setFieldValue功能重置字段。

您的组件：

const InputCheckbox = ({name, size, setFieldValue }) => {
  const [checkAmount, setCheckAmount] = useState(false);

  return(
    <div>
    <label htmlFor={size}>
      <Field type="checkbox" name={name}  checked={checkAmount} value={size} onClick={()=> {checkAmount === false ? setCheckAmount(true) : setCheckAmount(false); setFieldValue(`sizeamount.${size}`, '')}} />
      {size}
    </label>
    {checkAmount === false ? null : <div className="form-control-amount">
      <label htmlFor={`sizeamount.${size}`}>{size}</label>
      <Field className="form-control-amount" type="number" name={`sizeamount.${size}`} />
      </div>}
    </div>
)
}

用法：

<Formik
    initialValues={{
        check: true
    }}
    onSubmit={(values, actions) => {
        alert('Form has been submitted');
        actions.setSubmitting(false);
    }}
>
    {({setFieldValue}) => (
      <Form>
        <InputCheckbox name="check" size={10} setFieldValue ={setFieldValue} />
        <button type="submit">Submit</button>
      </Form>
    )}
</Formik>

参考：https ://formik.org/docs/api/formik

推荐阅读