取消勾选复选框时重置输入字段的实现方法（ReactJS + Formik）

核心原因 #

你当前仅通过checkAmount状态控制输入框的显隐，取消勾选时只是把输入框从DOM中移除，没有主动清除表单对应字段的存储值，因此值会一直残留。

修改方案 #

以你当前用的Formik组件库为例（Field是Formik的内置组件），可以通过Formik上下文提供的setFieldValue方法，在取消勾选时主动重置对应字段的值，修改后代码如下：

import { useState } from 'react';
import { Field, useFormikContext } from 'formik';

const InputCheckbox = ({name, size}) => {
  const [checkAmount, setCheckAmount] = useState(false);
  const { setFieldValue } = useFormikContext();
  const amountFieldName = `sizeamount.${size}`;

  const handleCheckboxChange = () => {
    const newChecked = !checkAmount;
    setCheckAmount(newChecked);
    // 取消勾选时重置输入字段值
    if (!newChecked) {
      // 可根据业务需求替换为0、undefined等初始值
      setFieldValue(amountFieldName, '');
    }
  }

  return(
    <div>
    <label htmlFor={size}>
      <Field 
        type="checkbox" 
        name={name} 
        value={size} 
        onChange={handleCheckboxChange}
      />
      {size}
    </label>
    {checkAmount && (
      <div className="form-control-amount">
        <label htmlFor={amountFieldName}>{size}</label>
        <Field 
          className="form-control-amount" 
          type="number" 
          name={amountFieldName} 
        />
      </div>
    )}
    </div>
)
}

补充说明 #

• 复选框状态变更建议用onChange事件代替onClick，更符合表单控件的原生交互逻辑，避免点击label等场景触发异常
• 如果你使用的是其他表单库或是自行维护输入框状态，逻辑一致：在复选框取消勾选的回调中，主动将输入框绑定的状态值重置为初始值即可
• 若需要重置时同时触发表单校验，可给setFieldValue传第三个参数true：setFieldValue(amountFieldName, '', true)

内容的提问来源于stack exchange，提问作者mellunar