javascript - Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form> - Stac

admin管理员组

文章数量:1355540

In reactjs, I am using the ant-design library for a form. In the console i face this problem:

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>

Can someone show me what mistake I made in my code?

code

import React, { ponent } from 'react';
import styled from 'styled-ponents';
import 'antd/dist/antd.css';
import './FirstStep.css';
import { Form, Input } from 'antd';
class RegisterStepOne extends React.Component {

  render() {
    const { getFieldDecorator } = this.props;
    return (
      <div>
        <FormCard>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('firstName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your First name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="First name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Last name" />)}
            </FormItem>
            <FormItem>
              {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>
          </Form>
        </FormCard>
      </div>
    );
  }
}
export default RegisterStepOne;

In reactjs, I am using the ant-design library for a form. In the console i face this problem:

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>

Can someone show me what mistake I made in my code?

code

import React, { ponent } from 'react';
import styled from 'styled-ponents';
import 'antd/dist/antd.css';
import './FirstStep.css';
import { Form, Input } from 'antd';
class RegisterStepOne extends React.Component {

  render() {
    const { getFieldDecorator } = this.props;
    return (
      <div>
        <FormCard>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('firstName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your First name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="First name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Last name" />)}
            </FormItem>
            <FormItem>
              {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>
          </Form>
        </FormCard>
      </div>
    );
  }
}
export default RegisterStepOne;

• javascript
• reactjs
• antd

Share Improve this question Follow edited Nov 30, 2018 at 11:52 DarkMukke 2,48911 gold badge2424 silver badges3232 bronze badges asked Nov 28, 2018 at 15:31 BradBrad 13333 gold badges55 silver badges1313 bronze badges 4

• Is RegisterStepOne used in some Form? Could you show its parent? What is FormCard? I can't see it in imports – barbsan Commented Nov 29, 2018 at 6:59
• Wele to Stack Overflow! I have edited your question with different formatting and edited the html element <form> to <form> as this is flagged by the system for anti spam measures. You should also stick to just the problem, and try not to repeat yourself. – DarkMukke Commented Nov 30, 2018 at 11:40
• 1 @DarkMukke I've also gone ahead and reintroduced the <form> tags, but with the correct formatting (Indenting to format it as code). I've also removed some noise, as "Thanks!", "Much Appreciated", which usually detracts from the question at hand. – Blue Commented Nov 30, 2018 at 11:44
• @FrankerZ yes much better, I did introduce a > out of nowhere that I removed. – DarkMukke Commented Nov 30, 2018 at 11:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Looking at the console screenshot suggests that <RegisterStepOne /> is a child of a <form> somewhere higher up the ponent tree.

You are seeing the error because your DOM renders to something like this

<form>
  <div>
    <form>
      <input />
    </form>
  </div>
</form>

Which is not valid HTML

In this case, you have DOM nesting error. Cause of dom tree, <form> in <form> as follows:

<form>
    <form></form>
</form>

If you want serve this, you'll change your form dom tree nesting.

本文标签： javascriptWarning validateDOMNesting() ltformgt cannot appear as a descendant of ltformgtStack Overflow