Reactjs react 表复选框不对任何操作做出react

发布于03月15日

我有react—table v8表.我有一些专栏.首先是checkbox.

const columns = [
    columnHelper.accessor("select", {
      id: "select",
      header: "",
      cell: (cell) => (
        <input
          type="checkbox"
          onChange={cell.row.getToggleSelectedHandler}
          checked={cell.row.getIsSelected()}
        />
      ),
    }),
    columnHelper.accessor("id", {
      header: "№",
      cell: (cell) => (
        <Link href={`${routes.support.routes.detailTicket}?id=${cell.getValue()}`}>
          #{cell.getValue()}
        </Link>
      ),
    }),
...]

并且复选框不会对我在主项目中的任何操作做出react .我就是按照doctor 说的做的.但在其他测试项目中-它运行得很完美.这会有什么问题呢？

这里stackblitz代码:https://stackblitz.com/edit/react-z2owmp?file=src%2FApp.js

推荐答案

首先，您需要将testData从函数中移出.然后直接处理复选框的更改，而不是像这样使用内置的处理程序:

    columnHelper.accessor('select', {
      id: 'select',
      header: '',
      cell: (cell) => (
        <input
          type="checkbox"
          checked={cell.row.getIsSelected()}
          onChange={() => cell.row.toggleSelected()}
        />
      ),
      size: 100,
    }),

然后初始化空array.

const [rowSelection, setRowSelection] = React.useState([]);

然后添加处理程序onRowSelectionChange处理程序，当用户点击复选框时，它将更新 Select 状态.

  const onRowSelectionChange = (newSelection) => setRowSelection(newSelection);

const table = useReactTable({
    data: testData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange,
    state: {
      rowSelection,
    },
    enableRowSelection: true,
    debugTable: true,
  });

这里有一个例子Stackblitz

Reactjs react 表复选框不对任何操作做出react

推荐答案

Reactjs相关问答推荐

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态，而不是呈现？<>

使用Reaction钩子窗体验证可选字段

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除？

使用Next.js和Next-intl重写区域设置

React js拖放图像并预览

太多的重新渲染 - React 中的无限循环.如何使用React.effect并使用fetch？

在Vite React上获取Amplify的环境变量

如何在我的自定义主题中样式化MUI TreeItem组件

如何更新redux状态存在的输入框

无法读取未定义的属性(读取值)...TypeError：无法读取未定义的属性(读取值)

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

损坏的图像 React useState

FlatList 不在 React Native 中呈现项目

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

Cypress - 替换 React 项目中的变量

React Router 6.4CreateBrowserRouter子元素不显示

react-query、react-hook-form 和表单验证

理解 React 中的 PrevState

在react 路由dom版本6中的组件内添加路由

如何在 NavBar 中设置动态标题