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

Question

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

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>
)
}

Answer 1

您可以使用 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

Answer 2

你可以

<button 
        class="btn btn-primary pull-right"
        type="reset"
        onClick={(e) => {
                  e.preventDefault();
                  props.resetForm()
                         }}                       
>Eliminar filtros</button>

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

Reset input on uncheck checkbox (ReactJS + Formik)

reactjs

formik