![](/img/trans.png)
[英]how to update parent's state from child component along with passing some information from child
[英]Passing information from child component to parent
这是此问题的后续问题:
我正在使用带有 function 组件和挂钩的 React > 16.8。
我有一个父组件,它管理一个组件来显示项目并添加一个新项目。 项目列表位于父组件中。 添加项目的方式是通过“+”按钮打开一个新的模式 window(它是它自己的组件),并且在里面有一个表单,用户可以插入新项目的详细信息。
const registerFormRef = useRef();
<Modal
isOpen={isFormOpen}
onCancel={() => setIsFormOpen(false)}
onSubmit={() => { registerFormRef.current.onSubmitForm(); setIsFormOpen(false) }}
titleText="Register Tenant">
<AddItem onAddItem={AddNewItem} ref={registerFormRef}></RegisterTenant>
</Modal>
AddNewItem
是一个回调,它将新项目添加到列表中。 该模式有一个“确定”按钮,用作提交按钮。 它属于父模态组件,而不是AddItem
子组件。
子组件中的方法:
useImperativeHandle(ref, () => (
{
onSubmitForm()
{
setIsLoading(true);
const newItem = {
name: formSettings["name"].value,
description: formSettings["description"].value,
area: "",
category: ""
}
props.onAddItem(newItem);
setIsLoading(false);
}
}));
我有一个从持有表单的子组件获取信息到父组件的问题,因为正如我所说的提交按钮属于模式,我不得不以某种方式从子表单内部调用回调。 我在上面的链接问题中使用了公认的答案。 它有效,但评论说这样传递信息不是一个好习惯。 是否有另一种将信息从子窗体传递到父组件的方法?
正确的方法是将表单数据存储在父级中,即呈现模态的组件中。 为此,您可以定义 state 并为其提供 onChange 处理程序。 一旦您对输入的任何更改执行此操作,AddItem 组件必须通过调用 onChange 方法通知其父级
const App = () => {
const [data, setData] = useState();
const handleChange=(newData) => {
setData(newData);
}
const onSubmit = () => {
// use data to do whatever you want with the formData
console.log(data);
setIsFormOpen(false)
}
...
return (
<Modal
isOpen={isFormOpen}
onCancel={() => setIsFormOpen(false)}
onSubmit={onSubmit}
titleText="Register Tenant">
<AddItem onAddItem={AddNewItem} handleChange={handleChange} ref={registerFormRef}></RegisterTenant>
</Modal>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.