Включение кнопки отправки, когда все входы заполнены?

Целые примеры не показывают простое решение, как оставить кнопку отправки отключенной, пока все поля заполняется в redux-form.

Я пытался использовать этот подход (TypeScript):

import * as React from 'react';
import * as reduxForm from 'redux-form';

export interface Props extends reduxForm.InjectedFormProps {}

let passedUsername = false;
let passedPassword = false;

const required = (value: string, callback: (passed: boolean) => void) => {
  console.info(`PERFORM REQUIRED FIELD CHECK FOR ${value}`);
  if  (value && value.trim().length > 0) {
      callback(true);
  } else {
    callback(false);
  }
};

const usernameRequired = (value: string) => {
  required(value, passed => { passedUsername = passed; });
};
const passwordRequired = (value: string) => {
  required(value, passed => { passedPassword = passed; });
}; 

const isPassed = () => {
  console.info(`USER PASSED: ${passedUsername}`);
  console.info(`PASSWORD PASSED: ${passedPassword}`);
  const result = passedUsername && passedPassword;
  console.info(`PASSED: ${result}`);
  return result;
};

const LoginForm = ({handleSubmit, pristine, submitting}: Props) => (
    <form onSubmit={handleSubmit}>
    <div>
      <label>Username </label>
      <reduxForm.Field
            name="username"
            component="input"
            type="text"
            validate={[usernameRequired]}
            placeholder="Username" 
      />
      <br/>
      <label>Password </label>
       <reduxForm.Field
            name="password"
            component="input"
            type="password"
            validate={[passwordRequired]}
            placeholder="Password" 
       />
    </div>
    <br/>
    <div>
        <button type="submit" disabled={!isPassed()}>
        <i className="fa fa-spinner fa-spin" style={{visibility: (submitting) ? 'visible' : 'hidden'}}/>
        &nbsp;
        <strong>Login</strong>
        </button>
      </div>
    </form>
);

export default reduxForm.reduxForm({
  form: 'login'
})(LoginForm);

Но этот код выше, похоже, не работает. Форма не хочет перерисовываться, даже если я заставлю ее через событие подписки. Он перерисовывается только тогда, когда запускается исходное или отправляющее событие. Но если я хочу перерисовать форму, просто игнорируйте ее. Может быть, я пропустил какой-то флаг, чтобы вручную перерисовать форму, когда мне нужно?


node.js typescript react-redux redux-form react-redux-form
person Arsenius    schedule 15.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, наконец-то решение найдено: просто нужно изменить параметр pure в конструкторе reduxForm с true (по умолчанию) на false

export default reduxForm.reduxForm({
  form: 'login',
  pure: false
})(LoginForm);

И from будет перерисовываться всякий раз, когда вам нужно.

person Arsenius    schedule 15.01.2018