0

我正在尝试使用 react-bootstrap-typeahead 作为我的 react-data-table-component 的搜索输入，以便有一个自动建议选项。我的问题是如何将所选选项反映到我的 dataTable 中，这样它只会显示所选的特定项目（或分页）。另一个问题是我无法反映filteredItems作为预输入的选项

const [filterText, setFilterText] = React.useState('');
  const [resetPaginationToggle, setResetPaginationToggle] = React.useState(
    false
  );

  //Data is passed to filtered items to sort
  const filteredItems =
    projects &&
    projects.filter(
      (project) =>
        project.name.toString().toLowerCase().includes(filterText) ||
        project?.description.toString().toLowerCase().includes(filterText)
    );

  const [singleSelections, setSingleSelections] = useState([]);
  const subHeaderComponentMemo = React.useMemo(() => {
    const handleClear = () => {
      if (filterText) {
        setResetPaginationToggle(!resetPaginationToggle);
        setFilterText('');
      }
    };

    let singleSelections = filterText;
    return (
      <Typeahead
        labelKey='name'
        onChange={(e) => setSingleSelections(e.target.value)}
        onClear={handleClear}
        options={filteredItems}
        placeholder='Search'
        selected={singleSelections}
      />
    );
  }, [filterText, resetPaginationToggle]);

这是我的数据表：

 <DataTable
          defaultSortAsc='id'
          pagination
          paginationResetDefaultPage={resetPaginationToggle}
          columns={columns}
          subHeader
          subHeaderComponent={subHeaderComponentMemo}
          persistTableHead
          expandableRows
          expandOnRowClicked
          expandableRowsComponent={<ExpandedComponent data={filteredItems} />}
          data={filteredItems}
        />
4

0 回答 0