当有人离开空字段时，如何显示错误消息

Question

我想在我的表单中添加错误消息。目前我正在开发ReactJs，我对ReactJs是个新手。我使用了ant设计表单，表单已经过验证，但当有人留下空字段时，没有在文本中显示错误消息。请帮帮我，因为我真的很困。谢谢

表单代码

import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import Input from 'antd/lib/input';
const FormCard = styled.div`
max-width: 100%;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;
margin-top: 30px;
`;
const FormItem = styled.div`
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
font-size: 14px;
font-variant: tabular-nums;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 18px;
vertical-align: top;
`;
class RegisterStepOne extends React.Component {
render() {
const { getFieldDecorator } = this.props;
return (
<div>
<FormCard>
<FormItem label="E-mail">
{getFieldDecorator('firstName', {
rules: [
{
required: true,
message: 'Please input your First name!',
whitespace: true,
},
],
})(<Input placeholder="First name" />)}
</FormItem>
<FormItem label="E-mail">
{getFieldDecorator('lastName', {
rules: [
{
required: true,
message: 'Please input your Last name!',
whitespace: true,
},
],
})(<Input placeholder="Last name" />)}
</FormItem>
<FormItem label="E-mail">
{getFieldDecorator('email', {
rules: [
{
type: 'email',
message: 'The input is not valid E-mail!',
},
{
required: true,
message: 'Please input your E-mail!',
},
],
})(<Input placeholder="Email" />)}
</FormItem>
<FormItem>
{getFieldDecorator('lastPosition', {
rules: [
{
required: true,
message: 'Please input your Last Position!',
whitespace: true,
},
],
})(<Input placeholder="Present or last position" />)}
</FormItem>
<FormItem>
{getFieldDecorator('lastCompany', {
rules: [
{
required: true,
message: 'Please input your Last Company!',
whitespace: true,
},
],
})(<Input placeholder="Present or last Company" />)}
</FormItem>
</FormCard>
</div>
);
}
}
export default RegisterStepOne;

Answer 1

我使用了您的代码并应用了antd原始演示。你可能错过了一两件事，看看吧：https://codepen.io/fawzisf/pen/RqyQVy

const { Form, Icon, Input, Button, Checkbox } = antd;
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem label="E-mail">
{getFieldDecorator('firstName', {
rules: [
{
required: true,
message: 'Please input your First name!',
whitespace: true,
},
],
})(<Input placeholder="First name" />)}
</FormItem>
<FormItem label="E-mail">
{getFieldDecorator('lastName', {
rules: [
{
required: true,
message: 'Please input your Last name!',
whitespace: true,
},
],
})(<Input placeholder="Last name" />)}
</FormItem>
<FormItem label="E-mail">
{getFieldDecorator('email', {
rules: [
{
type: 'email',
message: 'The input is not valid E-mail!',
},
{
required: true,
message: 'Please input your E-mail!',
},
],
})(<Input placeholder="Email" />)}
</FormItem>
<FormItem>
{getFieldDecorator('lastPosition', {
rules: [
{
required: true,
message: 'Please input your Last Position!',
whitespace: true,
},
],
})(<Input placeholder="Present or last position" />)}
</FormItem>
<FormItem>
{getFieldDecorator('lastCompany', {
rules: [
{
required: true,
message: 'Please input your Last Company!',
whitespace: true,
},
],
})(<Input placeholder="Present or last Company" />)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<a className="login-form-forgot" href="">Forgot password</a>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form>
);
}
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
ReactDOM.render(<WrappedNormalLoginForm />, mountNode);