代码之家 › 专栏 › 技术社区 › Kumara

使用排序解决数据表列过滤问题

react-table reactjs

Kumara · 技术社区 · 4 年前

我正在为我的项目使用反应数据表。目前我正在使用列过滤功能和列排序功能。这是我的表头。

 <thead>
  {headerGroups.map((headerGroup) => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map((column) => (
        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>
      ))}
      <th>Action</th>
    </tr>
  ))}
</thead>

列筛选器和列排序功能工作正常。但我的问题是,当我点击列过滤器文本框时,列排序开始触发并排序标题。理性是所有元素都在同一个“内”。我如何解决这个问题。

0 回复 | 直到 4 年前

Rohit Garg 4 年前

改变这个

<th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

到

<th {...column.getHeaderProps()}>
<span  {...column.getSortByToggleProps()}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
</span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

应该从根本上解决这个问题 getSortByToggleProps 返回与排序相关的道具,因此您只需在单击要排序的元素时将其提供给该元素

greenie-beans 4 年前

我不确定这是否有帮助,因为OP似乎没有使用FontAwesome,但我带着类似的问题来到这里,找到了这个解决方案: Failed to execute 'removeChild' on 'Node' with FontAwesome in React

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前