Open
Description
表单使用rc-form，校验并滚动到错误位置
示例：
Form.js代码
使用import { createForm, formShape } from 'rc-form';的话，form没有提供validateFieldsAndScroll方法，然而ANTD FORM确有这个方法；
这里使用import createDOMForm from 'rc-form/lib/createDOMForm';
createDOMForm提供validateFieldsAndScroll方法；
import React from 'react';
// import { createForm, formShape } from 'rc-form';
import createDOMForm from 'rc-form/lib/createDOMForm';
import FormItem from './components/FormItem/FormItem';
const warnMsg = msg => <p style={{ color: 'red', paddingTop: 5 }}>{msg}</p>;
class Form extends React.Component {
submit = () => {
// 验证并滚动到指定位置
this.props.form.validateFieldsAndScroll((error, value) => {
if (error) {
console.log(error);
} else {
//校验通过
console.log(value);
}
});
}
render() {
// let errors;
const { getFieldProps, getFieldError } = this.props.form;
return (
<div style={{ width: 600, margin: '0 auto' }}>
<h2>登录系统</h2>
<FormItem label="用户名" require>
<input
{...getFieldProps('applicantName', {
initialValue: '',
rules: [
{
required: true,
message: '户名不能为空'
}
]
})}
/>
{getFieldError('applicantName') && warnMsg(getFieldError('applicantName').join(','))}
</FormItem>
<FormItem label="密码" require>
<input
{...getFieldProps('applicantpwd', {
initialValue: '',
rules: [
{
required: true,
message: '密码不能为空'
}
]
})}
/>
{getFieldError('applicantpwd') && warnMsg(getFieldError('applicantpwd').join(','))}
</FormItem>
<button onClick={this.submit}>首选-按钮</button>
</div>
);
}
}
export default createDOMForm()(Form);FormItem.js代码：
FormItem只是展示，添加左右结构表单，并添加验证*号和引号的封装
import React from 'react';
import Styles from './FormItem.module.scss';
import cx from 'classnames';
const FormItem = ({ children, label, require }) => {
return (
<div className={Styles.formItem}>
{
label && <div className={cx(Styles.left, require ? Styles.require : '')}>{label}</div>
}
<div className={Styles.right}>
{children}
</div>
</div>
)
}
export default FormItem;FormItem.module.scss
.formItem{
overflow: hidden;
display: flex;
align-items: center;
margin-bottom: 20px;
.left{
width: 80px;
}
.left::after{
content: "："
}
.require::before{
content: "*";
color:red;
}
.right{
flex: 1;
}
}