如何禁用redux窗体中的“提交”按钮

Question

我正在使用redux表单的登录页面上工作。我想禁用提交按钮，直到电子邮件和密码被填充。我试过了，但我失败了，有人能帮我实现我的目标吗？谢谢

码

<form onSubmit={handleSubmit}>
      <div className="sign-up-form">
        <div className="space-2">
          <Field
            name="email"
            component={renderField}
            type="email"
            label="Email"
          />
        </div>
        <div className="space-2">
          <Field
            name="password"
            component={renderField}
            type="password"
            label="Password"
          />
        </div>
        {/* <button className='login-button' type='submit'>Login</button> */}
        <div className="">
          <button className="login-button" type="submit">
            {loading ? (
              <Loader
                type="ThreeDots"
                color="#ffffff"
                height="10"
                width="100"
              />
            ) : (
              "Login"
            )}
          </button>
        </div>
      </div>
    </form>

Answer 1

您可以检查这个链接handleSubmit和道具：

https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/

    const {invalid} = this.props

    return(
    <button type="submit" className="send-btn"
         disabled={invalid|| submitting || pristine}>
         submit
     </button>)

Answer 2

一种可能的方法是使用redux表单选择器读取输入值，并返回一个属性，指示是否应该启用按钮。

为此，您需要将表单连接到redux状态，并使用mapStateToProps返回所需的值。

想法：

import { connect } from "react-redux";
import { Field, reduxForm, formValueSelector } from "redux-form";


let MyForm = props => {
  const { enableSubmit } = props; // new property set from redux state

  return (
    <form>
     ... your form 
   </form>
}

const selector = formValueSelector("myForm"); // <-- same as form name
MyForm = connect(state => {
  const hasUsername = selector(state, "email"); // read username value
  const hasPassword = selector(state, "password"); // read username value
  const enableSubmit = hasUsername && hasPassword; // logic for enabling the submit button
  return {
    enableSubmit // this will set property `enableSubmit` which you can read in your component
  };
})(MyForm);

我准备了一个工作示例这里