React：如何使用子 FormItem 组件而不收到警告：validateDOMNesting：<form> 不能作为 <form> 的后代出现答案

【问题标题】：React: how to use child FormItem components without getting Warning: validateDOMNesting: <form> cannot appear as a descendant of <form>React：如何使用子 FormItem 组件而不收到警告：validateDOMNesting：<form> 不能作为 <form> 的后代出现
【发布时间】：2018-02-05 09:31:50
【问题描述】：

给定父组件，我正在使用一个子组件DynamicFieldSet，它是FormItems 的分组。但我收到错误：

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>. See CreateTopic > Form > form > ... > DynamicFieldSet > Form > form.

我曾尝试删除子组件中的<Form> </Form> 标签，但随后出现编译错误。

有没有办法可以禁用子窗体视图的呈现？

父组件

class CreateTopic extends React.Component {
render() {
    return (
      <div className="create-topic-container">
        <h3>Create an event</h3>
        <Form onSubmit={this.handleSubmit}>
          <FormItem>...</FormItem>
          <FormItem>...</FormItem>
          <FormItem>...</FormItem>
          <FormItem
            {...formItemLayout}
            label="Results"
            style={{ marginBottom: SPACING_FORM_ITEM }}
          >
            {getFieldDecorator('results', {
              rules: [
                {
                  required: true,
                  message: 'Results cannot be empty.',
                },
              ],
            })(<DynamicFieldSet
              form={this.props.form}
            />)}
          </FormItem>
        </Form>
      </div>
    );
  }
}

DynamicFieldSet - 子组件

export class DynamicFieldSet extends React.Component {
  render() {
    getFieldDecorator('keys', { initialValue: ['0', '1'] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
      return (
        <FormItem
          {...formItemLayoutWithOutLabel}
          required={false}
          key={k}
        >
          {getFieldDecorator(`results[${k}]`, {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [
              {
                required: true,
                whitespace: true,
                message: 'Result name cannot be empty.',
              },
              {
                validator: this.validateLength,
              },
            ],
          })(<Input placeholder={`Result #${index + 1}`} style={{ width: '80%', marginRight: 8 }} />)}
          {keys.length > 2 ? (
            <Icon
              className="dynamic-delete-button"
              type="minus-circle-o"
              disabled={keys.length === 1}
              onClick={() => this.remove(k)}
            />
          ) : null}
        </FormItem>
      );
    });

    return (
      <Form>
        {formItems}
        <FormItem {...formItemLayoutWithOutLabel}>
          {keys.length < 10 ? (
            <Button type="dashed" onClick={this.add} style={{ width: '80%' }}>
              <Icon type="plus" />Add Result
            </Button>
          ) : null}
        </FormItem>
      </Form>
    );
  }
}

【问题讨论】：

您从哪个库导入表单组件？
@Dyo 我在表单组件中使用antd

标签： forms reactjs nested-forms

【解决方案1】：

我在使用ant design table 时遇到了这个问题，结果发现它不是引发警告的蚂蚁设计。这是网络标准description

"Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."

所以，表单标签内不应该有表单标签。

为了解决这个问题（在我们的例子中），删除 DynamicFieldSet “return” 中的 Form 标签并替换为 div 标签

希望对你有帮助:)

【讨论】：

Ant 设计有component 属性，当在嵌套表单上设置为false 时，删除嵌套的表单标签等错误，它将像根本没有嵌套一样工作。
如果您将component设置为false，请再次测试代码的工作情况，因为它可能会导致意外行为。

【解决方案2】：

您可以像这样传送一个表单：

import Portal from '@material-ui/core/Portal';

const FooComponent = (props) => {
   const portalRef = useRef(null);

   return <>
      <form>
        First form
        <div ref={portalRef} />
      </form>
      <Portal container={portalRef.current}>
        <form>Another form here</form>
      </Portal>
   </>;
}

在上面的示例中，我使用了react material-ui Portal component。但是你也可以尝试使用React Portals 来实现它

【讨论】：

谢谢！这个答案激励我使用 React 门户并且它有效。
虽然可以，但不是嵌套形式

【解决方案3】：

在我的情况下，这是因为我在另一个 <form/> 标记中声明了 <form>。

【讨论】：

这正是我需要的，谢谢！