如何在父組件中獲取React子組件的屬性/object

Question

我創建了包含地址字段 [幾個輸入框和 SelectItems] 的 FC [比如我的示例的子組件]，當從另一個組件 [父] 調用此 FC 時，我需要訪問輸入框的值和 select 添加的項目用戶。

當父通過功能組件樣式 [TypeScript] 調用時，您能否通過給出子組件中說 1 文本框的簡單示例來幫助我

這是我的具有兩個 Inputs 和一個 SelectItem 的子組件的示例代碼

return (
    <>
          <Accordion varient={'grouped'} expanded theme={theme}
          items={[
            {
              content: 
              <>

              <Input label='Address Line 1' fullWidth={true} type={''} startAdornment={""} endAdornment={""}  
                  onChange={(e) => setAddressL1(e)} onBlur={handleChangeAddrL1} id={''} theme={theme} dynamic={false} />
             
                <Input label='City' fullWidth={false} type={''} startAdornment={""} endAdornment={""}                onChange={(e) => setCity(e)} onBlur={handleChangeCity} id={''} theme={theme} dynamic={false} /> 
             
            
              <Select label='State' theme={theme} items={states} value = {stateCode} sxProps={{ m: 2, width: 100 }} ref={inputRef}
                    onChange={handleChange1} ></Select> 
                
             
              <Button text= 'Verify Address' ></Button>

              </>,
              isExpanded: true,
              key: "string",
              subtitle: `${addressL1} ${addressL2} ${city} ${stateCode} ${county} ${zipCode}`, 
              title: AccordionTitle,
              actionBtn: <></>
            }
           ]}
          /> 

    </>  
   )
}

Answer 1

根據您想要實現的目標，有兩種情況可以處理您的請求。 首先，您可以使用由 onClick 或 onPress 事件觸發的子組件中navigation.navigate('RouterName', {/* your params here */})將數據從子組件傳遞到父組件。 假設 function 是 moveTo，那么您將在子組件中擁有這個：

const moveTo = () => {
//Logics here
...
navigate('/yourUrl/', { state: { id: 7, color: 'green' } });
}

然后在父組件中，像這樣抓取顏色的數據：

import { useParams } from 'react-router-dom'

const getdataFromChild = ({route,navigate}) => {
  return (
    <div>
        {route.params.state}
    </div>
  )
}

export default getDataFromChild

僅當您觸發從子級到父級的導航時才有可能，否則請移至選項 Second。

選項二：如果沒有點擊事件觸發從子到父或父到子的導航，則需要使用 React redux。 因此，您必須創建該數據的存儲並在整個應用程序中共享它，以便可以在需要它的每個組件中訪問它。 redux 的文檔也在medium上或 go 直接到react redux 的官方文檔以從源代碼獲取信息