使用值表单用户进行 React JS 过滤答案

【问题标题】：React JS Filtering with value form user使用值表单用户进行 React JS 过滤
【发布时间】：2022-11-02 22:53:46
【问题描述】：

我有一个表格，用户将在其中输入每列的值。他们可以通过输入一个值来进行过滤，并在此处将其设置为过滤器状态：

const [filters, setFilters] = useState({
    documentAuthor: '',
    documentName: '',
    documentSource: '',
    documentType: 'All',
    documentUploadDateFrom: '',
    documentUploadDateTo: new Date().toISOString(),
    featureId: '',
    fileFormat: '',
  });

该表当前填充在 useEffect 以及 typescript 函数中，该函数指定每个字段应该是什么类型：

setRows(
      documents.map((document) =>
        createData(
          document.documentAuthor ?? '',
          document.documentMetadataId.toLocaleString(),
          document.documentMetadataId.toLocaleString(),
          document.documentName ?? '',
          document.documentSource ?? '',
          document.documentType,
          document.featureId ?? '',
          document.mimeType,
          document.uploadDateTime,
        ),
      ),
    );

我通过这样的地图功能呈现表格：

rows.map((row, index) => { etc...

在哪里或如何输入过滤结果，以便表格随用户值更新？我最初的想法是在映射数据时添加过滤结果但是我不确定当用户使用新值更新过滤器时这会起作用吗？我尝试在 useEffect 中设置过滤器值无济于事。

这是过滤逻辑：

const filteredDocuments = documents.filter(
      (document) =>
          document.documentAuthor?.toLowerCase().includes(filters.documentAuthor.toLowerCase()) &&
          document.documentName?.toLowerCase().includes(filters.documentName.toLowerCase()) &&
          document.documentSource?.toLowerCase().includes(filters.documentSource.toLowerCase()) &&
          document.documentType.includes(filters.documentType === 'All' ? '' : filters.documentType) &&
          document.featureId?.includes(filters.featureId) &&
          document.mimeType.toLowerCase().includes(filters.fileFormat.toLowerCase()) &&
          document.uploadDateTime > filters.documentUploadDateFrom &&
          document.uploadDateTime < filters.documentUploadDateTo,
    );

【问题讨论】：

标签： javascript reactjs ecmascript-6 filtering

【解决方案1】：

让我们假设您有一个接受所有数据作为行的组件。

在该组件中，您将拥有一个可由用户设置的过滤器状态。

因此，在此之后，您将 setFilter 作为某个输入或您拥有的任何组件的回调运行，并且由于您的过滤器应该对每个过滤器更改应用更改，您可以在返回组件之前放置过滤逻辑它看起来像这样

const TableWithFilter = ({rows}) => {
  const [filter, setFilter] = useState(...)

  const handleFilterChange = (...) => {// set here your filters}

  const filteredData = rows.filter(...)

  return (
   ...
   filteredData.map(...)
   ...
  )
}

【讨论】：