Javascript 如何将值传递到handleChange？

嗨，我现在正在学习react和js。我在这里玩桌面组件演示：

因此，在演示中，它定义了：

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

然后在这里使用（第164行）：

所以我认为这是用来改变页面的。但是有一件事，在handleChangePage定义中，它有newPage变量，但是在onChangePage={handleChangePage}中使用它时，没有传入任何内容。 那么变量是如何传递的呢？ 难道不应该是这样的：

onChangePage={() => handleChangePage(newPage)}

?

如果我有多个表，并且希望将索引传递给change函数， 比如：

如何使用该功能？ 我是否仍然这样做：

onChangePage={handleChangePage}

---

这样，我认为它不会工作。

接受

onChangePage

属性的组件（在本例中为

TablePagination

）负责调用处理程序，这意味着它负责传递参数

用这条线

onChangePage={handleChangePage}

我们正在将函数的引用传递给

TablePagination

，它将在传递相关值的同时调用此函数

但是当我们像这样通过它的时候

onChangePage={() => handleChangePage(newPage)}

这意味着我们（父组件）负责传递参数，如果您仔细检查您的示例，您将看到它将中断，因为在此范围内没有声明任何

newPage

变量

我猜你想做的是：

onChangePage={(event, newPage) => handleChangePage(event, newPage)}

---

这应该可以很好地工作，但是当我们传递的函数与我们调用的内部函数具有相同的签名时，这是没有用的（除非我们要运行一些额外的逻辑）。因此，我们基本上可以像第一个示例中那样直接传递函数。

接受

onChangePage

属性的组件（在本例中为

TablePagination

）负责调用处理程序，这意味着它负责传递参数

用这条线

onChangePage={handleChangePage}

我们正在将函数的引用传递给

TablePagination

，它将在传递相关值的同时调用此函数

但是当我们像这样通过它的时候

onChangePage={() => handleChangePage(newPage)}

这意味着我们（父组件）负责传递参数，如果您仔细检查您的示例，您将看到它将中断，因为在此范围内没有声明任何

newPage

变量

我猜你想做的是：

onChangePage={(event, newPage) => handleChangePage(event, newPage)}

---

这应该可以很好地工作，但是当我们传递的函数与我们调用的内部函数具有相同的签名时，这是没有用的（除非我们要运行一些额外的逻辑）。所以我们基本上可以像第一个例子那样直接传递函数。

这是因为你没有传递任何东西。newPage由TablePagination组件作为注入参数提供（参数是事件和对应于新页面的数字输入）。如果您想重新确认，您可以这样做：

onChangePage={(event, newPage) => setPage(newPage)}

---

那是因为你没有通过任何东西。newPage由TablePagination组件作为注入参数提供（参数是事件和对应于新页面的数字输入）。如果您想重新确认，您可以这样做：

onChangePage={(event, newPage) => setPage(newPage)}

---

基本上，您将处理程序的引用传递给

TablePagination

组件，该组件在某个时间点（单击下一页或上一页）调用该函数。因此，每当调用引用函数时，它会在引用函数中传递一些额外的参数（本例中的页码），如果您检查该特定组件的类型定义文件，您将看到：

declare const TablePagination: OverridableComponent<TablePaginationTypeMap<
  {},
  React.ComponentType<TablePaginationBaseProps>
>>;



// and going to `TablePaginationTypeMap` will show you the `onChangePage` handler that passess the page number variable into your refrence function like below: 




export interface TablePaginationTypeMap<P, D extends React.ElementType> {
  props: P &
    TablePaginationBaseProps & {
      ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
      backIconButtonText?: string;
      backIconButtonProps?: Partial<IconButtonProps>;
      count: number;
      labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
      labelRowsPerPage?: React.ReactNode;
      nextIconButtonProps?: Partial<IconButtonProps>;
      nextIconButtonText?: string;
      onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;  <<<<<<<------ check here
      onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
      page: number;
      rowsPerPage: number;
      rowsPerPageOptions?: Array<number | { value: number; label: string }>;
      SelectProps?: Partial<SelectProps>;
    };
  defaultComponent: D;
  classKey: TablePaginationClassKey;
}```

Overall, the `TablePagination` component will pass the page number to your function internally and you will have it in your arguments list of your function.

declare const TablePagination:OverridableComponent>；
//转到“TablePaginationTypeMap”将显示“onChangePage”处理程序，该处理程序将页码变量传递到引用函数中，如下所示：
导出接口TablePaginationTypeMap{
道具：P&
TablePaginationBaseProps&{
ActionsComponent？：React.ElementType；
backIconButtonText？：字符串；
backIconButtonProps？：部分；
计数：数字；
labelDisplayedRows？：（分页信息：LabelDisplayedRowArgs）=>React.ReactNode；
labelRowsPerPage？：React.ReactNode；
nextIconButtonProps？：部分；
nextIconButtonText？：字符串；
onChangePage：（event:React.MouseEvent | null，page:number）=>void；基本上，您将处理程序的引用传递给
TablePagination
组件，该组件在某个时间点调用函数（单击下一页或上一页）。因此，每当调用引用函数时，它会自行在引用函数中传递一些额外的参数（本例中的页码），如果您检查该特定组件的类型定义文件，您将看到：

declare const TablePagination: OverridableComponent<TablePaginationTypeMap<
  {},
  React.ComponentType<TablePaginationBaseProps>
>>;



// and going to `TablePaginationTypeMap` will show you the `onChangePage` handler that passess the page number variable into your refrence function like below: 




export interface TablePaginationTypeMap<P, D extends React.ElementType> {
  props: P &
    TablePaginationBaseProps & {
      ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
      backIconButtonText?: string;
      backIconButtonProps?: Partial<IconButtonProps>;
      count: number;
      labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
      labelRowsPerPage?: React.ReactNode;
      nextIconButtonProps?: Partial<IconButtonProps>;
      nextIconButtonText?: string;
      onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;  <<<<<<<------ check here
      onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
      page: number;
      rowsPerPage: number;
      rowsPerPageOptions?: Array<number | { value: number; label: string }>;
      SelectProps?: Partial<SelectProps>;
    };
  defaultComponent: D;
  classKey: TablePaginationClassKey;
}```

Overall, the `TablePagination` component will pass the page number to your function internally and you will have it in your arguments list of your function.

declare const TablePagination:OverridableComponent>；
//转到“TablePaginationTypeMap”将显示“onChangePage”处理程序，该处理程序将页码变量传递到引用函数中，如下所示：
导出接口TablePaginationTypeMap{
道具：P&
TablePaginationBaseProps&{
ActionsComponent？：React.ElementType；
backIconButtonText？：字符串；
backIconButtonProps？：部分；
计数：数字；
labelDisplayedRows？：（分页信息：LabelDisplayedRowArgs）=>React.ReactNode；
labelRowsPerPage？：React.ReactNode；
nextIconButtonProps？：部分；
nextIconButtonText？：字符串；
onChangePage：（event:React.MouseEvent | null，page:number）=>void；那么如果我想传递其他参数，比如
index
，该怎么办呢？唯一的方法是onChangePage={（event，newPage，index）=>handleChangePage（event，newPage，index）}，这是正确的吗？我不确定在哪里声明了
索引
，但是如果您有一些要传递的变量，并且您可以在此范围内访问它们，那么您可以毫无问题地传递它们（当然，请确保您更新了
handleChangePage
签名）是的，如果TablePagination确实返回索引变量，这是正确的，但是，如果返回了索引变量，你不需要像那样显式地传递它。你可以直接向上传递