將信息從子組件傳遞給父組件

Question

這是此問題的后續問題：

從父調用子方法

我正在使用帶有 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);
    }

})); 

我有一個從持有表單的子組件獲取信息到父組件的問題，因為正如我所說的提交按鈕屬於模式，我不得不以某種方式從子表單內部調用回調。 我在上面的鏈接問題中使用了公認的答案。 它有效，但評論說這樣傳遞信息不是一個好習慣。 是否有另一種將信息從子窗體傳遞到父組件的方法？

Answer 1

正確的方法是將表單數據存儲在父級中，即呈現模態的組件中。 為此，您可以定義 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>
   )
}