<FormItem>
<Row gutter={10}>
<Col span={16}>
{getFieldDecorator("code", {
// rules: [{
// validator: (rule, value = "", callback) => {
// const text = captchaText;
// const upper = value.toUpperCase();
// if (upper !== text) callback("");
// callback();
// },
// }],
})(<Input placeholder="" />)}
</Col>
<Col
span={8}
className={styles.captchaText}
onClick={() => {
this.handleGetCaptcha();
}}
>
{<img src={captcha} alt="" />}
</Col>
</Row>
</FormItem>componentDidMount() {
this.handleGetCaptcha();
}
handleGetCaptcha = captcha => {
this.props.dispatch({
type: "login/fetchCaptcha",
});
this.setState({
captcha,
});
}; now the input error of the CAPTCHA is judged by the backend after the data is submitted. If the login is not successful, how to automatically refresh the CAPTCHA
, using the lifecycle function? It is better to make judgments when requesting fetch in models .