Reactjs 取消 Select 较高组件中的所有行

发布于10月07日

我正在为我的新Web应用程序使用Reaction Table V8.我有一个带有用于 Select 行的复选框的表.在组件树中位于较高位置的组件中，我正在对选定的行执行操作，然后希望清除所有选定的行.我在搜索时发现函数toggleAllRowsSelected.我try 将这个‘useEffect’添加到我的表组件中.

useEffect(() => {
    if (selectedRows.length === 0) {
        table.toggleAllRowsSelected(false);
    }
}, [selectedRows]);

然后我向下传递组件树中更高位置的组件中的"seltedRow". 但这导致了一个持续的循环.

我是这样创建我的ReactTable的:

const table = useReactTable({
    data,
    columns,
    state: {
        sorting,
        rowSelection,
        globalFilter,
        columnFilters
    },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel()
    // debugTable: true
});

有人知道我怎样才能正确地做到这一点吗？

基本上，我只想向下传递一个信号/触发器，以取消 Select 表中位于表本身上方的组件中的所有行.

//Define the methods required for the parent component to interact with the child component useImperativeHandle(ref, () => ({ resetSelectedRows: () => toggleAllRowsSelected(false) })); ... //In the parent component, we can deselect all rows by applying the following tableRef.current?.resetSelectedRows();

Reactjs 取消 Select 较高组件中的所有行

推荐答案

Reactjs相关问答推荐

使用useEffect挂钩获取数据

如何等待我的插入内容提交后再继续执行指令？

在带有和设计的表格中禁用和取消选中复选框

在Reaction中单击时，按钮未按预期工作

Formik验证不适用于物料UI自动完成

如何在REACTIVE js中动态添加或删除输入字段？

Mantine DatePickerInput呈现错误

使用VITE的Reaction应用程序的配置是否正确？

React 为什么标签导致 onClick 事件运行 2 次？

如果我使用 formik，如何在嵌套对象中写入正确的值？

我无法通过 useContext 显示值

为什么 useEffect 的初始化对于加载 localStorage 不起作用？

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

Next.js 和理智｜ npm run build 时预渲染页面/时发生错误

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子？

我正在try 使用 cypress 测试我的下拉列表，它 Select 值但不提交它们(手动工作)

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

在 redux 工具包中使用 dispatch 发送多个操作

react 路由路由加载器不适用于嵌套组件

哪个 PrivateRouter 实现更好：高阶组件还是替换？