javascript - 我想在 ReactJS 表单中显示错误消息
问题描述
我是 reactJS 的新手,我想在有人留空时显示错误消息。表单已经过验证,但无法显示错误消息。我从 ( ant-design
) 复制了此表单代码,我将共享它链接以查看原始表单,它工作正常,但在我的表单中,错误消息不起作用。原始表格链接表格链接
我的表单代码
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;
解决方案
如果你使用 Ant 设计组件,你应该先导入它们
import { Form, Input} from 'antd';
const FormItem = Form.Item;
另外,替换这个
export default RegisterStepOne;
和
const RegisterStepOne = Form.create()(RegisterStepOne);
ReactDOM.render(<RegisterStepOne />, mountNode);
推荐阅读
- r - 如何在 R 中生成具有多个值的直方图
- linux - 在 ftp 服务器上打开该文件夹时出错
- mongoose - 如何在猫鼬中使用地图运算符
- java - cucumber.runtime.CucumberException:无法实例化类 stepDefinitions.RegistrationStepDefinition
- linux - 在所有文件夹中打印 PNG 和 0-100000 数字的文件
- android - TimePicker 接受大于 24 小时的值
- python - Python索引错误:列表索引超出范围值表findall
- tensorflow - RNN 模型没有学到任何东西
- python - 两个同名但位置不同的标签xml
- asp.net-core - 有没有办法在剃刀视图 cshtml 文件中格式化十进制?