NextJS/Rect-是否可以将多个子组件状态合并为一个父组件状态

Question

问题

我有多个子组件，它们能够将其状态传递给父组件。我现在希望能够在一个Grandparent组件中渲染多个Parent组件，然后能够获取每个Parent组件的状态，并将其组合为Grandparent分量中的一个奇异状态/对象。请参阅此代码沙盒或查看下面的代码。

Child.tsx

import TextField from "@mui/material/TextField"
type Props = {
valueChange: (e: React.ChangeEvent<HTMLInputElement>) => void
id: string
}
const Child: React.FC<Props> = ({ valueChange, id }) => {
return (
<>
<TextField
id={id}
label={id}
name={id}
variant="outlined"
onChange={valueChange}
/>
</>
)
}
export default Child

Child2.tsx

import Checkbox from "@mui/material/Checkbox"
type Props = {
valueChange: (e: React.ChangeEvent<HTMLInputElement>) => void
id: string
}
const Child2: React.FC<Props> = ({ valueChange, id }) => {
return (
<>
<Checkbox name={id} onChange={valueChange} />
</>
)
}
export default Child2

Parent.tsx

import { useState } from "react"
import Child from "./Child"
import Child2 from "./Child2"
type Props = {}
const Parent: React.FC<Props> = ({}) => {
const [values, setValues] = useState({})
const valuesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const name = e.target.name
let value: any
if (name === "bool") {
value = e.target.checked
} else {
value = e.target.value
}
setValues((prev) => {
return { ...prev, [name]: value }
})
}
return (
<>
<div>{JSON.stringify({ values })}</div>
<div>
<Child valueChange={valuesChange} id={"Text1"} />
<Child valueChange={valuesChange} id={"Text2"} />
<Child2 valueChange={valuesChange} id={"bool"} />
</div>
</>
)
}
export default Parent

祖父母.tsx

import { Button } from "@mui/material"
import Parent from "./Parent"
const Grandparent: React.FC = () => {
const buttonClick = () => {
alert(
"Want this to look like following n" +
"data: [{Parent1 state},{Parent2 state}]"
)
}
return (
<>
<Parent />
<Parent />
<Button onClick={buttonClick}>Get Grandparent State</Button>
</>
)
}
export default Grandparent

Answer 1

只需将状态移动到需要它们的最高父级(祖父母(即可。然后，您可以相应地传递每个子组件需要的状态作为道具。

因此，您的情况下的状态应该在爷爷组件中。它作为<Parent state={state.child1} />传递给每个父级，依此类推。不过，这一变化将是复杂的。