react-table v8 如何获取自定义过滤器组件的选项值答案

【问题标题】：react-table v8 how to get options value for custom filter componentsreact-table v8 如何获取自定义过滤器组件的选项值
【发布时间】：2022-12-11 05:11:21
【问题描述】：

我如何获得 preFilteredRow 值以用作我的自定义下拉组件中的选项。我一直在努力显示自定义组件，但现在我再次陷入困境以获取所选列的值，现在我仍在手动执行此操作以填充选择 <option>，这是我目前的实现：

声明过滤器组件

declare module '@tanstack/table-core' {
  interface ColumnMeta<TData extends unknown, TValue> {
    filterComponent: (props: any) => any;
  }
}

列助手

const columns = [
  columnHelper.accessor('attributes.category.data.attributes.name', {
    cell: (info) => info.getValue(),
    header: 'Categori',
    meta: {
      filterComponent(setFilterValue) {
        return (
          <select
            name="Category"
            aria-label="Category"
            className="block w-full rounded-lg border-gray-200 text-sm shadow focus:border-green-500 focus:ring-1 focus:ring-green-500 focus:ring-opacity-75"
            onChange={(e) => setFilterValue(e.target.value)}
          >
            <option value="">All</option>
            <option value="MANUAL1">Manual Option 1</option>
            <option value="MANUAL2">Manual Option 2</option>
          </select>
        );
      },
    },
  }),
]

正如您在上面看到的，我仍然手动填充选择<option>以匹配所选单元格数据并且它工作正常。但我需要从选定的单元格数据中填充<option>。任何人都可以启发我吗？谢谢你。

【问题讨论】：

标签： reactjs typescript react-table

【解决方案1】：

我认为您可以将任何参数传递给 filterComponent(setFilterValue) 函数而不是 setFilterValue，您可以在调用“filterComponent”的地方传递例如 {column, table}

【讨论】：