如何使用可用性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>
    )
  }
}