Javascript 警告：ValidatedMonitoring（…；）：<；表格>；不能显示为<；的后代；表格>；通过使用语义用户界面反应模式
当我在语义ui react的模式中使用Javascript 警告：ValidatedMonitoring（…；）：<；表格>；不能显示为<；的后代；表格>；通过使用语义用户界面反应模式,javascript,reactjs,semantic-ui,Javascript,Reactjs,Semantic Ui,当我在语义ui react的模式中使用表单时，它显示了错误 警告：validateDOMNesting（…）：不能显示为后代 的 我知道，如果形式中有形式，这是一种展示 下面是我的代码，没有人。如果我不使用modal，就没有错误 import { useState } from "react"; import { Helmet } from "react-helmet"; import { Button, Modal, Form } from "
表单时，它显示了错误
警告：validateDOMNesting（…）
：不能显示为后代
的
我知道，如果形式中有形式，这是一种展示
下面是我的代码，没有人。如果我不使用modal，就没有错误
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>
);
};
从“react”导入{useState}；
从“react Helmet”导入{Helmet}；
从“语义ui react”导入{按钮、模式、表单}；
从“../../Styles/Wrapper”导入{Body，Wrapper，Content，Article}；
//eslint禁用下一行导入/无匿名默认导出
导出默认值（公司id、公司机密、onSubmit）=>{
const[open，setOpen]=useState（false）；
返回(
巨剧
setOpen（false）}
onOpen={（）=>setOpen（true）}
open={open}
触发={
开始
}
>
添加
);
};
在表单
中不能有表单
。在呈现Modal
组件时，删除as={Form}
。您还应该修复函数参数，因为组件接收到props
对象。您应该解构公司id
，公司机密
，以及提交
导出默认值（{company\u id，company\u secret，onSubmit}）=>{
// ...
}
而且
组件也存在一些问题。您应该向他们传递值
和onChange
道具。您可以创建两个状态变量companyId
和companySecret
，以管理输入状态
const[companyId，setCompanyId]=useState（公司id）
const[companySecret，setCompanySecret]=useState（公司秘密）
setCompanyId（e.target.value）}
/>
setCompanySecret（e.target.value）}
/>
另外，我建议在所有地方使用camelCase
变量（除非您必须使用snake\u case
）以保持一致性。您不能在表单中使用表单
。在呈现Modal
组件时，删除as={Form}
。您还应该修复函数参数，因为组件接收到props
对象。您应该解构公司id
，公司机密
，以及提交
导出默认值（{company\u id，company\u secret，onSubmit}）=>{
// ...
}
而且
组件也存在一些问题。您应该向他们传递值
和onChange
道具。您可以创建两个状态变量companyId
和companySecret
，以管理输入状态
const[companyId，setCompanyId]=useState（公司id）
const[companySecret，setCompanySecret]=useState（公司秘密）
setCompanyId（e.target.value）}
/>
setCompanySecret（e.target.value）}
/>
另外，我建议在任何地方使用camelCase
变量（除非您必须使用snake\u case
）以保持一致性。非常感谢，它很有效。我把蛇è的箱子固定在cameCase@liamstory不客气。非常感谢，它很管用。我把蛇è的箱子固定在cameCase@liamstory不客气。
<>
<Form.Input
name="id"
value={companyId}
onChange={(e) => setCompanyId(e.target.value)}
/>
<Form.Input
name="secret"
value={companySecret}
onChange={(e) => setCompanySecret(e.target.value)}
/>
</>