redux-form中pristine属性为何无法实现双字段必填后启用提交按钮？

你当前遇到的问题出在对pristine属性的理解上：pristine表示表单从未被用户修改过，只要任何一个字段被输入或选择，pristine就会立刻变为false。所以当你只填写一个字段时，pristine是false，如果此时submitting也为false，按钮就会被启用，这显然不符合你“两个字段都填完才允许提交”的需求。

要实现“所有必填字段完成后才启用提交按钮”的效果，你需要结合redux-form的表单验证机制和invalid属性：

1. 添加表单验证规则 #

首先给两个字段添加必填验证，确保只有当两个字段都有值时，表单才处于“验证通过”状态。你可以通过validate函数来实现：

// 定义表单验证函数
const validate = values => {
  const errors = {};
  // 校验productId必填
  if (!values.productId) {
    errors.productId = '请输入产品ID';
  }
  // 校验type必填
  if (!values.type) {
    errors.type = '请选择产品类型';
  }
  return errors;
};

然后把这个验证函数配置到reduxForm中：

let ComponentContainer= reduxForm({
  form: "formProduct",
  validate // 注入验证函数
})(ComponentWrapped);

2. 修改按钮禁用条件 #

将按钮的disabled属性从pristine || submitting改为invalid || submitting：

<button type="submit" disabled={invalid || submitting} >
  <SaveIcon />
</button>

这里的invalid是redux-form注入的属性，它表示当前表单是否存在验证错误。当两个必填字段都未填写或只填了一个时，invalid为true，按钮保持禁用；只有当两个字段都填写完成、验证通过时，invalid才会变为false，按钮才能被点击。

额外注意事项 #

如果你使用的自定义Dropdown组件是自己封装的，需要确保它能正确接收并处理redux-form传递的value、onChange等属性，这样redux-form才能正确跟踪字段的状态，invalid的值才会准确更新。

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