警告:validateDOMNesting(…): <form> 不能通过使用语义-ui-react 模态显示为 <form> 的后代
Warning: validateDOMNesting(…): <form> cannot appear as a descendant of <form> by using semantic-ui-react modal
当我在 semantic-ui-react 的模态中使用 Form
时,它显示错误。
Warning: validateDOMNesting(…)
: cannot appear as a descendant
of
表格中有表格我知道是show
下面是我的代码,没有一个。如果我不使用模态,则没有错误。
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>
);
};
form
中不能有 form
。渲染 Modal
组件时移除 as={Form}
。您还应该修复函数参数,因为组件接收到一个 props
对象。您应该解构 company_id
、company_secret
和 onSubmit
.
export default ({ company_id, company_secret, onSubmit }) => {
// ...
}
<Form.Input>
组件存在一些问题。您应该将 value
和 onChange
道具传递给他们。您可以创建几个状态变量 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)}
/>
</>
P.S。我建议在任何地方都使用 camelCase
变量(除非你绝对必须使用 snake_case
)以保持一致性。
当我在 semantic-ui-react 的模态中使用 Form
时,它显示错误。
Warning:
validateDOMNesting(…)
: cannot appear as a descendant of
表格中有表格我知道是show
下面是我的代码,没有一个。如果我不使用模态,则没有错误。
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>
);
};
form
中不能有 form
。渲染 Modal
组件时移除 as={Form}
。您还应该修复函数参数,因为组件接收到一个 props
对象。您应该解构 company_id
、company_secret
和 onSubmit
.
export default ({ company_id, company_secret, onSubmit }) => {
// ...
}
<Form.Input>
组件存在一些问题。您应该将 value
和 onChange
道具传递给他们。您可以创建几个状态变量 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)}
/>
</>
P.S。我建议在任何地方都使用 camelCase
变量(除非你绝对必须使用 snake_case
)以保持一致性。