Почему нетронутый реквизит не отключает кнопку для обоих Redux-полей - PullRequest
Новая
       19

Почему нетронутый реквизит не отключает кнопку для обоих Redux-полей

0 голосов
/ 30 января 2019

У меня есть 2 поля и кнопка отправки.2 поля контролируются редукс-формой.Оба поля должны быть заполнены до нажатия кнопки отправки, поэтому я использую нетронутые и отправляющие реквизиты, чтобы отключить кнопку, если 2 поля пусты.Проблема в том, что, если я заполняю одно из 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);

1 Ответ

0 голосов
/ 31 января 2019

pristine означает, что свойства значения «ни одно из полей» не отличаются от их начальных свойств », поэтому, как только одно поле имеет значение, отличное от значений, которые вы инициализировали, для pristine будет установлено значение false.используйте эту переменную для включения функции reset().

То, что вы хотите сделать, это сделать эти два поля обязательными. Есть два способа сделать это: либо просто установить эти два поля, как требуется, например, так:

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

Или вы выполните Пример проверки на уровне поля и добавите проверку 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>
  );
}
...