redux-form调用reset方法无法清除所有表单字段问题求助

你调用reset('myForm')没有清空字段的核心原因是：redux-form的resetAPI的作用是将表单恢复到初始化时传入的initialValues状态，而非清空所有字段。你现在执行后回到历史选中值，说明你表单配置的initialValues就是该历史值，自然无法清空。

方案1：批量修改字段值实现清空（适配自定义清空需求） #

直接调用changeAPI给所有字段赋值为空值，适配不同字段类型的空值定义：

import { change } from 'redux-form';

const clearAll = () => {
  // 替换为你的表单所有字段名
  const formFields = ['selectKey', 'checkboxKey', 'inputKey'];
  formFields.forEach(field => {
    // 字段空值按实际需求设置：下拉框/输入框设为''，复选框设为false即可
    const emptyValue = field === 'checkboxKey' ? false : '';
    props.dispatch(change('myForm', field, emptyValue));
  })
}

方案2：调整initialValues后使用reset #

如果要沿用reset方法，只需在初始化表单时将initialValues设置为所有字段为空的状态即可：

// 表单redux-form装饰器配置
export default reduxForm({
  form: 'myForm',
  // 所有字段的空值要和对应表单控件的默认选项value匹配
  initialValues: {
    selectKey: '', // 和你select默认空选项的value保持一致
    checkboxKey: false,
    inputKey: ''
  }
})(YourFormComponent)

配置完成后再调用props.dispatch(reset('myForm'))就会自动复位到所有字段为空的状态，下拉框也会匹配到默认空选项。

注意排查点 #

• 确认select组件的默认空选项的value属性和initialValues中对应字段的空值完全一致，比如默认选项value为undefined，但initialValues给的是空字符串，就会出现复位后下拉框无法匹配默认选项的问题。
• 若你在业务逻辑中调用过initialize方法更新表单初始值，reset会恢复到最后一次initialize传入的状态，需清空时只需要最后一次调用initialize时传入全空的初始值即可。

内容的提问来源于stack exchange，提问作者Dalal-360