Как отключить кнопку отправки в приставной форме

Question

Я работаю на странице входа в систему, где я использую редукс-форму. Я хочу отключить кнопку отправки, пока адрес электронной почты и пароль не будут заполнены. Я пытался, но мне не удалось, может кто-нибудь помочь мне, как достичь своей цели. Спасибо

Код

<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

Возможный способ сделать это - использовать избыточную форму селекторы , чтобы прочитать входные значения и вернуть свойство, указывающее, должна ли кнопка быть включена или нет.

Для этого, вам нужно подключить форму к состоянию приведения и использовать 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);

Я подготовил рабочий пример здесь