React - 从父级中的子功能组件获取数据

Question

我有功能组件、表父级和行子级。 子控件由父控件传递的数据启动。控件使用 useState 挂钩来更新各个项目。所以他们的初始 dataRows 数组在父级中，当前状态在各个行中。现在我想在父表下方添加一个保存按钮，以保留更改。我知道我可以将回调传递给子级，但是该操作是在父级上执行并需要来自多个子级的数据这一事实呢？我可能会为初始行执行保存，但我想为所有存在的行批量运行它，所以它需要在父级上完成，并从父级启动。

家长：

export default function RozliczeniaFaktur ({web, context, formType}: IRozliczeniaFakturProps) {
    const [dataRows, setDataRows] = React.useState(emptyRowArr);
    const [isError, setIsError] = React.useState(false);
    const [errorMessage, setErrorMessage] = React.useState(null);

[...]
    
    return (
      
      <div className={styles.rozliczeniaFaktur}>
      <Stack tokens={stackTokens}>
      {isError && <MessageBar messageBarType={MessageBarType.error} isMultiline={false} >
        {errorMessage}
      </MessageBar>} 
      <div className={styles.dataTable}>
        <div className={styles.scrollContainer}>
        <table id='rozliczenia' className={styles.table}>
          <thead>
            <tr>
[...]
            </tr>
          </thead>
          <tbody>
             {dataRows && 
                dataRows.map((dataRow, i) => {
                  return <TableRowControl web={web} key={i} Context={context} RowId={i}  FormType={formType}
                    onAddRowCallback={addRow} onDeleteRowCallback={delRow}  />
                })
              }
          </tbody>
        </table>
        </div>
        <div>

        </div>
      </div>
      </Stack>
    </div>
    );
  
}

孩子：

const TableRowControl = ({RowId, Context, PozFaktury, FormType, onAddRowCallback, onDeleteRowCallback, web, 
    onErrorCallback, OrganizacjaDictionary, VatDictionary, MpkDictionary, KontoDictionary, ZastepstwaDictionary,
    ZaliczkaDictionary} : ITableRowControlProps) => {   
    const [oddzialRozliczenia, setOddzialRozliczenia] = React.useState<number | string>(PozFaktury.OddzialRozliczenia);
    const [dataSprzedazy, setDataSprzedazy] = React.useState<Date>(PozFaktury.DataSprzedazy);
    const [dataOtrzymania, setDataOtrzymania] = React.useState<Date>(PozFaktury.DataOtrzymania);
    const [vat, setVat] = React.useState<string | number>(PozFaktury.StawkaVAT);
    const [nip, setNip] = React.useState<string>(PozFaktury.NIPDostawcy);
    const [waluta, setWaluta] = React.useState<string | number>(PozFaktury.Waluta);
    const [nrDok, setNrDok] = React.useState<string>(PozFaktury.NRDokumentu);
    const [kwota, setKwota] = React.useState<string>(PozFaktury.KwotaBrutto.toString())
    const [mpk, setMpk] = React.useState<string | number>(PozFaktury.MPK);
    const [konto, setKonto] = React.useState<string | number>(PozFaktury.KontoGL);
    const [magazyn, setMagazyn] = React.useState(PozFaktury.Magazyn);
    const [nrPz, setNrPz] = React.useState(PozFaktury.NrPZ);
    const [opis, setOpis] = React.useState(PozFaktury.Opis);
    const [zaliczka, setZaliczka] = React.useState<string | number>(PozFaktury.Zaliczka);
    const [aprobata1status, setAprobata1status] = React.useState(PozFaktury.Aprobata1Status);
    const [aprobata2status, setAprobata2status] = React.useState(PozFaktury.Aprobata2Status);
    const [komentarz, setKomentarz]



    return(
        <tr>
[...]
        </tr>
        );
}

export default TableRowControl;

Answer 1

尝试使用 useImperativeHandle 挂钩，它可能会对您有所帮助，它可以将方法和内容从您的孩子传递给您的父母，供您的父母使用。