我如何将 useState 值从 child 传递到 parent
How can i pass useState value from child to parent
我有两个 child 组件,它们具有不同的状态。现在我想在 two-child 组件中使用状态并在 parent 中渲染它。我该怎么做
function ChildA() {
const [solutestate, setsolutestate] = useState("");
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestate}
/>
</div>
);
}
const childB = () => {
const [solventstate, setsolventstate] = useState("");
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolventstate}
/>
</div>
);
};
function App() {
return (
<div className="App">
<ChildA />
<ChildB />
<div>{solutestate}</div>
<div>{solventstate}</div>
</div>
);
}
你应该将状态保存在父级中(称为提升状态),然后将设置器传递给子级。
function ChildA({ setsolutestateA}) {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestateA}
/>
</div>
);
}
const childB = ({{ setsolutestateB}}) => {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestateB}
/>
</div>
);
};
function App() {
const [solutestateA, setsolutestateA] = useState("");
const [solutestateB, setsolutestateB] = useState("");
return (
<div className="App">
<ChildA {...{setsolutestateA}}/>
<ChildB {...{setsolutestateB}}/>
<div>{solutestateA}</div>
<div>{solutestateB}</div>
</div>
);
}
您应该将设置状态的函数从 parent 传递给 child 组件,这样 child 可以通过调用更新 parent 的状态一个通过 props 传递的函数。
例如:
Parent:
function App() {
const [solventstate, setsolventstate] = useState("");
const sendDataToParent = (solventstate) => { // the callback. Use a better name
setsolventstate(solventstate);
}
return (
<div className="App">
<ChildA sendDataToParent={sendDataToParent}/>
<ChildB sendDataToParent={sendDataToParent}/>
</div>
);
};
Child:
const childB = ({sendDataToParent}) => {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={sendDataToParent(solventstate)}
/>
</div>
);
}:
我有两个 child 组件,它们具有不同的状态。现在我想在 two-child 组件中使用状态并在 parent 中渲染它。我该怎么做
function ChildA() {
const [solutestate, setsolutestate] = useState("");
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestate}
/>
</div>
);
}
const childB = () => {
const [solventstate, setsolventstate] = useState("");
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolventstate}
/>
</div>
);
};
function App() {
return (
<div className="App">
<ChildA />
<ChildB />
<div>{solutestate}</div>
<div>{solventstate}</div>
</div>
);
}
你应该将状态保存在父级中(称为提升状态),然后将设置器传递给子级。
function ChildA({ setsolutestateA}) {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestateA}
/>
</div>
);
}
const childB = ({{ setsolutestateB}}) => {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={setsolutestateB}
/>
</div>
);
};
function App() {
const [solutestateA, setsolutestateA] = useState("");
const [solutestateB, setsolutestateB] = useState("");
return (
<div className="App">
<ChildA {...{setsolutestateA}}/>
<ChildB {...{setsolutestateB}}/>
<div>{solutestateA}</div>
<div>{solutestateB}</div>
</div>
);
}
您应该将设置状态的函数从 parent 传递给 child 组件,这样 child 可以通过调用更新 parent 的状态一个通过 props 传递的函数。
例如: Parent:
function App() {
const [solventstate, setsolventstate] = useState("");
const sendDataToParent = (solventstate) => { // the callback. Use a better name
setsolventstate(solventstate);
}
return (
<div className="App">
<ChildA sendDataToParent={sendDataToParent}/>
<ChildB sendDataToParent={sendDataToParent}/>
</div>
);
};
Child:
const childB = ({sendDataToParent}) => {
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={sendDataToParent(solventstate)}
/>
</div>
);
}: