ReactJS中无法退格删除输入框已有值问题求助

React + Formik + Yup 输入框退格键失效问题解决办法 #

1. 确认Formik字段绑定逻辑正确

别自己瞎写onChange覆盖默认逻辑，优先用Formik提供的getFieldProps自动绑定状态，确保输入框的value、onChange、onBlur都和Formik的状态同步：

<input
  type="text"
  {...formik.getFieldProps('yourFieldName')}
/>

如果必须自定义onChange逻辑，一定要调用formik.setFieldValue更新状态，别只改自己的变量：

<input
  type="text"
  value={formik.values.yourFieldName}
  onChange={(e) => {
    // 这里写你的自定义处理，比如过滤空格
    const processedValue = e.target.value.replace(/\s/g, '');
    // 关键：必须用Formik的方法更新值
    formik.setFieldValue('yourFieldName', processedValue);
  }}
  onBlur={formik.handleBlur}
/>

2. 排查Yup验证规则的坑

有些不合理的验证逻辑会强制保留值，导致退格无效：

• 去掉transform里强制把空值转成默认值的代码，比如这种：

// 错误示例：空值会被转成'默认值'，退格删不掉
const schema = Yup.object().shape({
  yourFieldName: Yup.string().transform(val => val || '默认值').required()
});

改成正常的验证：

const schema = Yup.object().shape({
  yourFieldName: Yup.string().required('此字段必填')
});

• 初始化值别用undefined，改成空字符串''，避免类型不匹配导致状态更新失败：

<Formik
  initialValues={{ yourFieldName: '' }} // 用空字符串初始化
  validationSchema={schema}
  onSubmit={(values) => console.log(values)}
>
  {/* 表单内容 */}
</Formik>

3. 检查全局事件监听是否干扰

如果页面里有全局keydown监听，别不小心阻止了退格键的默认行为：

// 错误示例：全局阻止退格，所有输入框都失效
document.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace') e.preventDefault();
});

调整逻辑，排除输入框场景：

document.addEventListener('keydown', (e) => {
  // 只有当焦点不在输入框时，才阻止退格
  if (e.key === 'Backspace' && e.target.tagName.toLowerCase() !== 'input') {
    e.preventDefault();
  }
});

内容的提问来源于stack exchange，提问作者Baij N Rathore