javascript - 如何将更新的数组对象从reactJs中的子组件传递给父组件
问题描述
我在我的组件中添加、编辑、更新和删除运行良好的数组元素。
问题是我无法对父组件执行相同的过程,因为我需要将该数组数据传递给父组件。
一个数组在子组件中获取项目(将该项目也发送到父组件数组)
更新(更新实际的一项,但也更新父组件数组中的类似对象)
删除也一样。
在子组件中执行所有这些操作时,我无法更新父数组。
我想在我的父组件中更新数组。下面是代码。
子组件:
// child component saving element in an array
saveLeadPlanDialog = () => {
const {updateMode, lead_id, year, probability, plan2, plan3, fee, addcosts} = this.state;
// here i am setting that data in child component
this.setState(state => ({
lead_plans: [...state.lead_plans, {
id: Date.now(),
year: year,
probability: probability,
plan2: plan2,
plan3: plan3,
fee: fee,
addcosts: addcosts
}]
}));
// here i am sending that data to parent component.
this.props.plansClick({
id: Date.now(),
year: year,
probability: probability,
plan2: plan2,
plan3: plan3,
fee: fee,
addcosts: addcosts
}
);
}
// here i am doing delete process in child component
handleRemoveFields = () => {
const {updateMode, lead_plan_row} = this.state;
this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));
};
// updating in child component
const {lead_id, lead_plans, year, probability, plan2, plan3, fee} = this.state;
const new_lead = {
id: lead_id,
year,
probability,
plan2,
plan3,
fee,
};
const updated_lead_plans = lead_plans.map((lead) => lead.id === lead_id ? new_lead : lead);
this.setState({
lead_plans: updated_lead_plans,
year: '',
probability: '',
plan2: '',
plan3: '',
fee: '',
addcosts: '',
newFieldsEditMode: false,
LeadPlanSaveUpdateDialogOpen: false
});
父组件:
// parent component method.
handlePlansClick = (planData) => {
// this is parent componet, here i need to do update, delete the array object which got updation and deletion in child component
// it alwaya adds item right now.
this.setState(state => ({
lead_plans: [...state.lead_plans, planData]
}));
}
我也需要在我的父组件中完成所有这些过程。
有没有更好的方法来处理这种情况?
如何在父组件中获取更新、编辑、删除的项目和操作?
因此,孩子和父母都在数组中显示相同的数组组件数据。
解决方案
要将数据从子级传递给父级,您可以编写如下代码,您将在父级中获取数据。
Class Child {
const passDataToParent =() =>{
const sampleObj = {"name": "Xyz","contact":98739793};
this.props.receiveChildData(sampleObj );
};
}
Class Parent{
const storeChildData = (dataReceivedFromChild) =>{
console.log("Received child data",storeChildData)
}
render(){
return (<Child receiveChildData={this.storeChildData}>);
}
}
推荐阅读
- php - count():参数必须是数组或者实现了Countable的对象 - phpWord
- css - 菜单项 CSS 旁边的徽标
- java - 在jpa实体中使用json字段(实现hibernate UserType)
- c++ - 嵌套 asio 调用以 __throw_bad_function_call() 结束
- r - R:提取字符串的第一部分,以特定字符分隔
- python - Keras:如何获得两个以上类别的预测标签
- javascript - 如何在nodejs中异步导出模块
- java - 如何自定义 SpringWebFlux WebClient xml+rss JAXB 反序列化?
- excel - 基于多列的条件累积和
- c++ - 信号/插槽 Qt5 C++