Question

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

家长：

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 钩子，它可能对您有所帮助，它是关于将方法和内容从您的孩子传递给您的父母以供您的父母使用。

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

1 个答案: