提问人：user21476047 提问时间：11/17/2023 更新时间：11/18/2023 访问量：58
如何更新传递给 Child 组件的函数
How to update function that is passed to the Child component
问：
假设我有一个组件。最初，我将该组件放在父组件中并创建了我的函数，一切正常。但是，我想将该组件抽象为其自己的自定义 Child 组件，现在我的 Parent 组件调用该 Child 组件。DropdownDropdownhandleChangeDropdown
现在我想知道如何将该函数从我的父组件传递到我的子组件，以便我可以更新该函数以更新子组件中的状态。不确定如何进行？我需要使用函数吗？还是别的什么？handleChangehandleChangeuseCallBack
const ParentComponent = () => {
const identifierValue = useState([]);
...there are more states here.
const handleChange = (_, items) => {
//updates different states here
};
return (
<ChildComponent
selectedItem={identifierValue}
onChange={handleChange}
/>
);
};
export default ParentComponent;
const ChildComponent = ({ identifierValue, handleIdentifierChange }) => {
const handleChange = (_, items) => {
//I want to update the Child component states here
};
return (
<Dropdown
selectedItem={identifierValue}
onChange={handleChange}
/>
);
};
export default ChildComponent;
答：
0赞
Zak
11/17/2023
#1
在 Parent 组件中，仅传递 和handleChangeidentifierValue
const ParentComponent = () => {
const identifierValue = useState([]);
...there are more states here.
const handleChange = (_, items) => {
//updates different states here
};
return (
<ChildComponent
identifierValue={identifierValue}
handleChange={handleChange}
/>
);
};
export default ParentComponent;
在 Child 组件中，仅检索和handleChangeidentifierValue
const ChildComponent = ({ identifierValue, handleChange}) => {
return (
<Dropdown
selectedItem={identifierValue}
onChange={handleChange}
/>
);
};
export default ChildComponent;
评论
0赞
user21476047
11/17/2023
是的，我知道如何将函数道具传递给子组件。但是，如何将传递的函数更新给子项？
0赞
Zak
11/17/2023
您也可以将各种钩子（未显示）传递给子项。-- 或者将所有不同的钩子放在一个中并通过它 -- 两者的行为相同。//updates different states here.props
0赞
user21476047
11/17/2023
是的，但这就是我问问题的原因，因为我不知道该怎么做
0赞
GoodJuJu
11/17/2023
#2
可以在 ChildComponent 中定义的函数内部执行调用。如果尝试访问 ParentComponent 中定义的 ChildComponent 内部的状态设置器，还可以将状态设置器作为 props 从父级传递到子级。props.onChange()handleChange
0赞
Mohamed El Hammi
11/17/2023
#3
假设该事件将由 Dropdown 组件中的操作触发。handleChange
如果要更新子组件和父组件中的状态，请考虑以下实现：
const ParentComponent = () => {
const identifierValue = useState([]);
const handleChange = (_, items) => {
//updates different states here
};
return (
<ChildComponent
selectedItem={identifierValue}
onChange={handleChange}
/>
);
};
export default ParentComponent;
const ChildComponent = ({ identifierValue, handleIdentifierChange }) => {
const handleChange = (_, items) => {
// Update the child states
handleIdentifierChange();
};
return (
<Dropdown
selectedItem={identifierValue}
onChange={handleChange}
/>
);
};
export default ChildComponent;
评论
0赞
user21476047
11/17/2023
您可以删除答案的第一部分。第二部分是我需要的。谢谢
评论