React中Tabulator自定义多条件筛选功能实现求助

我在React应用中已集成Tabulator作为数据表格库，需要实现多条件自定义筛选功能。查阅文档仅找到jQuery示例，请问ReactTabulator组件是否有对应Props？我尝试了如下代码，但无法正常运行：

const Tabela = () => {
  const filterFields = [
    {
      value: "name",
      label: "Nome"
    },
    {
      value: "age",
      label: "Idade"
    }
  ];
  const [selectedField, setSelectedField] = useState(null);
  const [filterType, setFilterType] = useState("=");
  const [filterValue, setFilterValue] = useState("");

  const tableRef = useRef(null);
  const [tableInstance, setTableInstance] = useState(null);

  function customFilter(data) {
    return data.car && data.rating < 3;
  }
  
  const handleFieldChange = (selectedOption) => {
    setSelectedField(selectedOption);
  };

  const handleFilterChange = () => {
    if (!selectedField) return;

    let filter = selectedField.value === "function" ? customFilter : selectedField.value;
    
    if (filter) {
      tableInstance?.setFilter(filter, filterType, filterValue);
    }
  };

  const clearFilter = () => {
    setSelectedField(null);
    setFilterType("=");
    setFilterValue("");
    tableInstance?.clearFilter();
  };

  const columns = [
    {
      titleFormatter: () => '<i style="font-size: 20px" class="bi bi-card-text"></i>',
      field: "custom",
      hozAlign: "center",
      formatter: reactFormatter(
        <>
          <button className="edit" title="Editar" data-bs-toggle="modal" data-bs-target="#editarAcao">
            <img width="20" height="20" src={ImgSrc} alt="" />
          </button>
        </>
      ),
      headerSort: false
    },
    { title: "Nome", field: "name", width: 150 },
    { title: "Idade", field: "age", hozAlign: "left", formatter: "progress" },
    {
      title: "teste",
      field: "passed",
      hozAlign: "center",
      formatter: "tickCross"
    },
    { title: "teste", field: "color" },
    { title: "teste", field: "dob" }
  ];

  const options = {
    height: 200,
  };

  return (
    <main id="content" role="main" className="main">
      <div className="container">
        <div>
          <Select 
            id="filter-field" 
            onChange={handleFieldChange} 
            placeholder="选择筛选字段" 
            value={selectedField}
            options={filterFields} 
          />
          <select 
            id="filter-type" 
            value={filterType}
            onChange={(e) => setFilterType(e.target.value)}
            disabled={selectedField?.value === "function"}
          >
            <option value="=">=</option>
            <option value="<"><</option>
            <option value="like">like</option>
          </select>
          <input 
            id="filter-value" 
            type="text" 
            placeholder="筛选值"
            value={filterValue}
            onChange={(e) => setFilterValue(e.target.value)}
            onKeyUp={handleFilterChange}
            disabled={selectedField?.value === "function"}
          />
          <button id="filter-clear" onClick={clearFilter}>
            清除筛选
          </button>
          <button onClick={handleFilterChange}>应用筛选</button>
        </div>
        <ReactTabulator
          ref={tableRef}
          onRef={setTableInstance}
          columns={columns}
          data={data}
          options={options}
          data-custom-attr="test-custom-attribute"
          className="custom-css-class"
        />
      </div>
    </main>
  );
}

问题分析与解决方案 #

1. ReactTabulator 筛选方式说明
   ReactTabulator本身没有专门的筛选Props，但可以通过获取Tabulator原生实例，调用其内置的setFilter、clearFilter等方法实现自定义筛选，逻辑和jQuery示例一致，只是获取实例的方式不同。

2. 原代码核心问题

• 实例获取错误：直接用tableRef（ref对象）调用方法，正确做法是通过onRef属性获取Tabulator实例，或使用tableRef.current.table。
• DOM操作不当：直接通过ref修改DOM元素状态，React中应使用状态控制，避免直接操作DOM。
• 初始值不匹配：useState(3)的初始值和筛选字段value不匹配，导致初始选中项为空。
• 封装组件ref使用错误：若用react-select这类封装组件，直接用ref拿不到原生DOM元素，需通过组件自身状态获取选中值。

3. 关键修正点

• 用onRef属性获取Tabulator实例并存储在状态中，确保组件挂载后能调用实例方法。
• 用React状态管理筛选字段、类型、值，替代直接DOM操作。
• 拆分事件处理函数，让逻辑更清晰，如单独处理字段选择、筛选值修改、筛选应用。
• 通过状态判断控制输入框的disabled状态，而非直接操作DOM。

内容的提问来源于stack exchange，提问作者fernands