将信息从子组件传递给父组件答案

【问题标题】：Passing information from child component to parent将信息从子组件传递给父组件
【发布时间】：2020-08-21 12:33:35
【问题描述】：

这是这个问题的后续问题：

我正在使用带有函数组件和钩子的 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);
    }

}));

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

【问题讨论】：

请贴出父子组件的所有相关部分。
添加子部分

标签： javascript reactjs

【解决方案1】：

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

【讨论】：