![](/img/trans.png)
[英]How to handle null values when using availity-reactstrap-validation
[英]How to disable form submit button using availity reactstrap validation
我正在使用帶有可用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>
);
}
}
如何禁用登錄按鈕? 請幫忙。
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>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.