Ant Design 4 是一个基于 React 的 UI 组件库,可以用于构建漂亮的用户界面。下面是一个使用 Ant Design 4 来验证表单项的示例代码:
import React from 'react';
import { Form, Input, Button } from 'antd';
const FormItem = Form.Item;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
formValues: {
name: '',
age: '',
},
formErrors: {
name: '',
age: '',
},
};
}
handleInputChange = (event) => {
const { name, value } = event.target;
this.setState((prevState) => ({
formValues: {
...prevState.formValues,
[name]: value,
},
}));
}
handleFormSubmit = (event) => {
event.preventDefault();
// 验证表单项
const { formValues } = this.state;
const formErrors = {};
let isValid = true;
if (!formValues.name) {
formErrors.name = '姓名不能为空';
isValid = false;
}
if (!formValues.age) {
formErrors.age = '年龄不能为空';
isValid = false;
} else if (isNaN(formValues.age)) {
formErrors.age = '年龄必须是数字';
isValid = false;
}
this.setState({ formErrors });
// 如果表单项验证通过,则提交表单
if (isValid) {
// 提交表单的代码
console.log('表单提交成功');
}
}
render() {
const { formValues, formErrors } = this.state;
return (
);
}
}
export default App;
这个示例中,我们使用了 Ant Design 的 Form、Input 和 Button 组件来构建表单。在表单的 onSubmit 事件中,我们使用了自定义的表单验证逻辑来检查表单项是否为空,以及年龄是否为数字。如果验证通过,则可以执行提交表单的操作。
在表单项的 Input 组件中,我们使用了 value 属性来绑定表单项的值,并使用 onChange 事件来更新表单项的值。同时,我们还使用了 help 属性和 validateStatus 属性来显示错误提示信息和错误状态。
希望这个示例对你有帮助!