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

Question

我想在表单中添加错误消息。目前，我正在从事ReactJs的工作，我绝对是ReactJs的新手，我使用过的ant-design表单，表单已经过验证，但是当有人离开空白字段时，文本中未显示错误消息。请帮助我，因为我真的很困。谢谢

表格代码

/test?abc=MY_STRING

Answer 1

我使用了您的代码并应用了antd原始演示。 您可能错过了一两件事，请查看： superior INDEX/MATCH

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);