为什么原始道具不会禁用两个 Redux-Fields 的按钮

Question

我有 2 个字段和一个提交按钮。这 2 个字段由 redux-form 控制。在按下提交按钮之前需要填写两个字段，所以如果 2 个字段为空，我使用 pristine 和 submitting 道具禁用按钮。问题是，如果我填写 2 个字段之一，该按钮将变为启用状态，但我希望它在填写两个字段后启用该按钮。我做错了什么？

<form onSubmit={handleSubmit(this.submit)}>
 <div id="product-searchbar">
  <Field
   component="TextField"
   type="text"
   name="productId"
   placeholder="Enter a name product..."
  />
 </div>
 <Field
  component="Dropdown"
  header="Choose a product"
  name="type"
  items={[
   { value: "product a", id: 1 },
   { value: "product b", id: 2 }
  ]}
 />
 <button
  type="submit"
  disabled={pristine || submitting}
 >
  <SaveIcon />
 </button>
</form>

let ComponentContainer= reduxForm({
 form: "formProduct"
})(ComponentWrapped);

Answer 1

pristine 表示 "none of the fields" 值属性与其初始属性不同”，因此一旦一个字段的值与您初始化的值不同，pristine 将被设置为false。您使用此变量启用 reset() 功能。

您要做的是将这 2 个字段设置为必填字段。有两种方法可以做到：要么你只需要设置这两个字段，像这样：

<Field
   component="TextField"
   type="text"
   name="authId"
   placeholder="Enter an auth-Id..."
   required
/>

或者您遵循此 Field-Level Validation Example 并添加 required 验证：

const required = value => (value ? undefined : 'Required');

render() {
  return (
    <form onSubmit={handleSubmit(this.submit)}>
      <div id="authId-searchbar">
        <Field
          component="TextField"
          type="text"
          name="authId"
          placeholder="Enter an auth-Id..."
          validate={required}
        />
      </div>
      <Field
        component="Dropdown"
        header="Choose a credential type"
        name="type"
        items={[
          { value: "product a", id: 1 },
          { value: "product b", id: 2 }
        ]}
        validate={required}
      />
      <button
        type="submit"
        disabled={pristine || submitting}
      >
        <SaveIcon />
      </button>
    </form>
  );
}

为什么原始道具不会禁用两个 Redux-Fields 的按钮

Why pristine props does not disable button for both Redux-Fields

submit

reactjs

redux

redux-form

react-redux