如何使用可用性 reactstrap 验证禁用表单提交按钮

Question

我正在使用带有可用性 reactstrap 验证的 reactjs。当表单出现验证错误时，我想禁用表单提交按钮。仅在没有验证错误时启用提交按钮所有电子邮件地址都有效所有验证通过。我怎样才能做到这一点？

这是我的代码。

import React, { Component } from "react";
import { Row, Card, CardTitle, Form, Label, Input, Button } from "reactstrap";
import { AvForm, AvField, AvGroup } from "availity-reactstrap-validation";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { Colxx, Separator } from "../../components/common/CustomBootstrap";
import IntlMessages from "../../helpers/IntlMessages";
import { loginUserAsync } from "./../../redux/auth/actions";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event, errors, values) {
    debugger;
    console.log(errors);
    console.log(values);
    if (errors.length === 0) {
      try {
        this.props.loginUserAsync(values, this.props.history);
      } catch (e) {
        alert(e.message);
      }
      //submit
    }
  }

  handleInputChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value
    });
  };

  render() {
    const { username, password } = this.state;
    return (
      <Row className="h-100">
        <Colxx xxs="12" md="10" className="mx-auto my-auto">
          <Card className="auth-card">
            <div className="position-relative image-side ">
              <p className="text-white h2">MAGIC IS IN THE DETAILS</p>
              <p className="white mb-0">
                Please use your credentials to login.
                <br />
                If you are not a member, please{" "}
                <NavLink to={`/register`} className="white">
                  register
                </NavLink>
                .
              </p>
            </div>
            <div className="form-side">
              <NavLink to={`/`} className="white">
                <span className="logo-single" />
              </NavLink>
              {/* <CardTitle className="mb-4">
                <IntlMessages id="user.login-title" />
              </CardTitle> */}
              <AvForm
                className="av-tooltip tooltip-label-right"
                onSubmit={this.handleSubmit}
              >
                <AvGroup className="error-t-negative">
                  <Label className="has-float-label">Email</Label>
                  <AvField
                    name="username"
                    type="email"
                    value={username}
                    defaultValue={username}
                    onChange={this.handleInputChange}
                    validate={{
                      required: {
                        value: true,
                        errorMessage: "This is a required field."
                      },
                      email: {
                        value: true,
                        errorMessage: "Please enter a valid email address"
                      }
                    }}
                  />
                </AvGroup>
                <AvGroup className="error-l-75 error-t-negative">
                  <Label className="has-float-label">Password</Label>
                  <AvField
                    name="Password"
                    type="password"
                    value={password}
                    defaultValue={password}
                    onChange={this.handleInputChange}
                    validate={{
                      required: {
                        value: true,
                        errorMessage: "This is a required field."
                      }
                    }}
                  />
                </AvGroup>
                <div className="d-flex justify-content-between align-items-center">
                  <NavLink to={`/forgot-password`}>
                    <IntlMessages id="user.forgot-password-question" />
                  </NavLink>
                  <Button color="primary" className="btn-shadow" size="lg">
                    Login
                  </Button>
                </div>
              </AvForm>
            </div>
          </Card>
        </Colxx>
      </Row>
    );
  }
}

如何禁用登录按钮？请帮忙。

Answer 1

AVForm 有 onInvalidSubmit 道具，也许 你可以这样做

// Updated Answer
const Component = props => {
  const [hasError, setHasError] = useState(false)
  const formEl = useRef(null)

  const handleChange = a => {
    setHasError(formEl.current._inputs.email.context.FormCtrl.hasError())
  }

  return (
    <AvForm ref={formEl}>
      <AvField name="email" onFocus={handleChange} onChange={handleChange} label="Email Address" type="email" required />
      <button color="primary">Submit</button>
      <div>{hasError ? "YES": "NO"}</div>
    </AvForm>
  )

}

基于类

class AnotherApp extends React.Component {
  constructor(props) {
    super(props)
    this.formEl = React.createRef()
    this.state = {
      hasError: false,
    }
  }

  handleChange = a => {
    this.setState({
      hasError: this.formEl.current._inputs.email.context.FormCtrl.hasError()
    })
  }

  render() {
    return (
      <AvForm ref={this.formEl}>
        <AvField name="email" onFocus={this.handleChange} onChange={this.handleChange} label="Email Address" type="email" required />
        <button color="primary">Submit</button>
        <div>{this.state.hasError ? "YES": "NO"}</div>
      </AvForm>
    )
  }
}