使用 Typescript 将数据从 Child 发送到 Parent

Question

我正在尝试使用 Typescript 将数据从 Child 组件发送到 Parent 组件。有很多资源，但很多都没有探索打字稿的概念。

在 Parent 上，我将如何设置 ProductType 事件？这是使用 React.ChangeEvent 的正确方法吗？我们正在使用带有 Material UI.

的下拉选择器

onProductTypeChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         setProductType(e.target.value)}

完整代码：

Parent:

const ProductExport = () => {
 const [productType, setProductType] = useState<undefined | string>('');

 return (
 <>
 <ProductFilters
      productTypeValue={productType}
      onProductTypeChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         setProductType(e.target.value)}
 />

Child:

type Props = {
  productTypeValue?: string;
  onProductTypeChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
};

const ProductFilters = ({
  productTypeValue,
  onProductTypeChange
}: Props) => {
  return (
    <Box>
      <Accordion>
        <AccordionSummary>
          <Typography>Products</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Box >
            <Box>
              <TextField
                select
                value={productTypeValue}
                onChange={onProductTypeChange}
                label={'Select Product Type'}
              >

Answer 1

通常你隐藏子进程（实际事件）的内部细节，只向父进程公开结果（新数据）：

// Parent
const ProductExport = () => {
 const [productType, setProductType] = useState<undefined | string>('');

 return (
   <ProductFilters
      productTypeValue={productType}
      onProductTypeChange={setProductType}
   />
  );
}

// Child
type Props = {
  productTypeValue?: string;
  onProductTypeChange?: (newType: string) => void;
};

const ProductFilters = ({
  productTypeValue,
  onProductTypeChange
}: Props) => {
  return (
    <TextField
      select
      value={productTypeValue}
      onChange={(event) => onProductTypeChange?.(event.target.value)}
      label={'Select Product Type'}
    />
  );
}

Answer 2

React 有一个为多个事件处理程序准备好的类型，例如 ChangeEventHandler (TS playground):

type Props = {
  productTypeValue?: string;
  onProductTypeChange: ChangeEventHandler<HTMLInputElement>;
};

const ProductFilters = ({
  productTypeValue,
  onProductTypeChange
}: Props) => null;

const ProductExport = () => {
  const [productType, setProductType] = useState<undefined | string>('');

  const onProductTypeChange: ChangeEventHandler<HTMLInputElement> = e => setProductType(e.target.value);

  return (
    <ProductFilters
      productTypeValue={productType}
      onProductTypeChange={onProductTypeChange}
    />
  );
};

使用 Typescript 将数据从 Child 发送到 Parent

React Send Data from Child to Parent with Typescript

typescript

reactjs

material-ui