时间戳

首页 > 解决方案 > 将信息从子组件传递给父组件

javascript - 将信息从子组件传递给父组件

问题描述

这是此问题的后续问题：

从父调用子方法

我正在使用带有功能组件和钩子的 React > 16.8。

我有一个父组件，它管理一个组件来显示项目并添加一个新项目。项目列表位于父组件中。添加项目的方式是通过“+”按钮打开一个新的模式窗口（它是它自己的组件），并且内部有一个表单，用户可以插入新项目的详细信息。

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);
    }

}));

我有一个从持有表单的子组件获取信息到父组件的问题，因为正如我所说的提交按钮属于模式，我不得不以某种方式从子表单内部调用回调。我在上面的链接问题中使用了公认的答案。它有效，但评论说这样传递信息不是一个好习惯。是否有另一种将信息从子表单传递到父组件的方法？

标签： javascriptreactjs

解决方案

正确的方法是将表单数据存储在父级中，即呈现模态的组件中。为此，您可以定义一个状态并为其提供 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>
   )
}

推荐阅读