填充所有输入时启用提交按钮按钮？答案

【问题标题】：Enabling submit button button when all inputs is filled?填充所有输入时启用提交按钮按钮？
【发布时间】：2018-01-15 03:01:59
【问题描述】：

整个examples 没有显示简单的解决方案如何在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

【解决方案1】：

好了，终于找到了解决办法：只需要将reduxForm构造函数中的参数pure从true（默认）修改为false

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

并且 from 将在您需要时重新渲染。

【讨论】：