我想在 ReactJS 表单中显示错误消息答案

【问题标题】：I want to show Error message in ReactJS Form我想在 ReactJS 表单中显示错误消息
【发布时间】：2019-04-26 15:52:00
【问题描述】：

我是 reactJS 新手，我想在有人留空时显示错误消息。表单已经过验证，但无法显示错误消息。我从 (ant-design) 复制了此表单代码，我将分享它链接以查看原始表单，它工作正常，但在我的表单中，错误消息不起作用。原文链接Form Link

我的表单代码

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;

【问题讨论】：

标签： javascript reactjs ant-design-pro

【解决方案1】：

如果你使用的是 Ant 设计组件，你应该先导入它们

import { Form,  Input} from 'antd';
const FormItem = Form.Item;

另外，替换这个

export default RegisterStepOne;

与

const RegisterStepOne = Form.create()(RegisterStepOne);

ReactDOM.render(<RegisterStepOne />, mountNode);

【讨论】：