警告：validateDOMNesting(…)：<form> 不能通过使用语义-ui-react 模态显示为的后代</form>

Question

When I use Form in modal of semantic-ui-react , it shows that error.当我在semantic-ui-react的模态中使用Form时，它会显示该错误。

Warning: validateDOMNesting(…) : cannot appear as a descendant of警告： validateDOMNesting(…) : 不能作为后代出现

I know it is show if there are form in form.我知道如果表格中有表格，那就是表演。

Below is my code, there are no one.下面是我的代码，没有人。 if i don't use modal, there are no error.如果我不使用模态，则没有错误。

import { useState } from "react";
import { Helmet } from "react-helmet";
import { Button, Modal, Form } from "semantic-ui-react";
import { Body, Wrapper, Content, Article } from "../../Styles/Wrapper";

// eslint-disable-next-line import/no-anonymous-default-export
export default (company_id, company_secret, onSubmit) => {
  const [open, setOpen] = useState(false);

  return (
    <Body>
      <Wrapper>
        <Helmet>
          <title>juju</title>
        </Helmet>
        <Content>
          <Article>
            <Modal as={Form}
              onClose={() => setOpen(false)}
              onOpen={() => setOpen(true)}
              open={open}
              trigger={
                <Button
                  style={{ marginBottom: 10, backgroundColor: "#FEE500" }}
                  size="large"
                  fluid
                >
                  <span style={{ fontSize: 15 }}>begin</span>
                </Button>
              }
            >
              <Modal.Header>add</Modal.Header>
              <Modal.Content>
                <Form onSubmit={onSubmit}>
                  <Form.Group>
                    <Form.Input
                      placeholder="put id"
                      name="id"
                      {...company_id}
                    />
                    <Form.Input
                      placeholder="put secret"
                      name="secret"
                      {...company_secret}
                    />
                    <Form.Button content="Submit" />
                  </Form.Group>
                </Form>
              </Modal.Content>
            </Modal>
          </Article>
        </Content>
      </Wrapper>
    </Body>
  );
};

Answer 1

You cannot have a form inside a form . form中不能有form 。 Remove as={Form} when rendering the Modal component.渲染Modal组件时移除as={Form} 。 You should also fix the function arguments since the component receives a props object.您还应该修复 function arguments，因为该组件接收props object。 You should destructure company_id , company_secret , and onSubmit .您应该解构company_id 、 company_secret和onSubmit 。

export default ({ company_id, company_secret, onSubmit }) => {
  // ...
}

And there are a few issues with the <Form.Input> components. <Form.Input>组件存在一些问题。 You should pass them the value and onChange props.您应该将value和onChange道具传递给他们。 You could create a couple of state variables companyId and companySecret to manage the input states.您可以创建几个 state 变量companyId和companySecret来管理输入状态。

const [companyId, setCompanyId] = useState(company_id)
const [companySecret, setCompanySecret] = useState(company_secret)

<>
  <Form.Input
    name="id"
    value={companyId}
    onChange={(e) => setCompanyId(e.target.value)}
  />
  <Form.Input
    name="secret"
    value={companySecret}
    onChange={(e) => setCompanySecret(e.target.value)}
  />
</>

PS I would suggest using camelCase variables everywhere (unless you absolutely have to use snake_case ) for consistency. PS 我建议在任何地方使用camelCase变量（除非你绝对必须使用snake_case ）以保持一致性。

警告：validateDOMNesting(…)：<form> 不能通过使用语义-ui-react 模态显示为的后代</form>

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-03-23 00:18:56

警告：validateDOMNesting(…)：<form> 不能通过使用语义-ui-react 模态显示为的后代</form>

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-03-23 00:18:56

解决方案1
2 已采纳 2021-03-23 00:18:56