填写所有输入后启用提交按钮按钮吗? [英] Enabling submit button button when all inputs is filled?

问题描述

整个示例没有显示简单的解决方案，如何保持禁用提交按钮直到所有字段都填入 redux形式.

Entire examples doesn't show simple solution how to keep submit button disabled until all fields is filled up in redux-form.

我尝试使用这种方法(TypeScript):

I tried to use this approach (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);

但是上面的这段代码似乎不起作用.即使我通过订阅事件强制表单也不想重新呈现.仅在触发原始或提交事件时才重新渲染.但是，如果我想重新渲染自己的表格，则可以忽略它.也许我错过了一些在需要时手动重新呈现表单的标志?

But this code above doesn't seems to be working. The form doesn't want to re-render even if I force it through subscribe event. It only re-render when pristine or submitting event is triggered. But if I want to re-render myself the form just ignore it. Maybe some flag I missed to re-render manually the form when I need to?

推荐答案

好，终于找到解决方案:只需在reduxForm构造函数中从 true pure >(默认)为 false

Ok, finally the solution has been found: just need to modify parameter pure in reduxForm constructor from true (default) to false

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

并且无论何时需要，发件人都将重新呈现.

And the from will re-render whenever you need.

这篇关于填写所有输入后启用提交按钮按钮吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！