Question

这是该问题的后续问题：

我正在使用带有功能组件和挂钩的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);
    }

}));

我遇到了一个问题，即从子窗体获取信息到子窗体，因为我说的提交按钮属于模式，所以我不得不以某种方式从子窗体内部调用回调。我在上面的链接问题中使用了可接受的答案。可以，但是评论说这不是传递这样的信息的好习惯。有没有其他方法可以将信息从子表单传递到父组件？

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

将信息从子组件传递到父组件

1 个答案: