可以在antd表单中使用getFieldError()函数来获取第一个错误的表单控件的名称,并通过ref访问该表单控件的标签进行滚动处理。
具体示例代码如下:
import React from 'react';
import { Form, Input, Button } from 'antd';
class MyForm extends React.Component {
componentDidMount() {
this.scrollToFirstError();
}
scrollToFirstError = () => {
const { form } = this.props;
const firstErrorField = Object.keys(form.getFieldsError()).find(field => form.isFieldTouched(field) && form.getFieldError(field));
if (firstErrorField) {
const formItemNode = document.querySelector(`.ant-form-item-control-input-has-error [name="${firstErrorField}"]`);
formItemNode.scrollIntoView({ behavior: 'smooth' });
}
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
render() {
const { getFieldDecorator, getFieldsError } = this.props.form;
return (
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
)}
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your password!' }],
})(
)}
);
}
}
const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm);
export default WrappedMyForm;