文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在React中为material-React上每一列实现自定义搜索远程数据

问如何在React中为material-React上每一列实现自定义搜索远程数据
EN

Stack Overflow用户

提问于 2020-06-12 01:41:15

回答 2查看 2K关注 0票数 1

我想知道是否有可能在React中为我的材料表数据中的每一列实现自定义搜索行？

我希望有一个函数来调用我的Django Rest api的搜索函数，并在material-table中使用我的搜索过滤器中提交的数据，然后只显示匹配的数据。

基于材料表文档，我尝试实现customFilterAndSearch并将term传递给一个定制方法，该方法调用带有搜索条件的Rest api，但customFilterAndSearch多次访问该方法。实际上，我通过表中的行数来调用axios get方法。

下面是自定义的customFilterAndSearch调用：

customFilterAndSearch: (term, rowData) => this.getDataFilterNomService(term, rowData) },

下面是我使用的自定义方法：

async getDataFilterNomService(term, rowData){
    console.log("TermDinFilter", term)
    //console.log("rowDataDinFilter", rowData)
    try{
      let response = await axiosInstance.get('get/servicecatalog/filterNomService/', {
        params: {
          "nom_service":term
        }
      });
      console.log("Response la Filtru NomService", response)

    } catch(error){
        console.log("Error: ", JSON.stringify(error, null, 4));
        throw error;
    }

  }

下面是当我试图搜索一个名字时，django是如何被调用的："Viorel“

backend_1   | [11/Jun/2020 16:49:02] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?

对于表中每个条目的数量，它会被调用18个times...as。

我想知道是否有一种方法可以在用户输入提交操作时覆盖customFilterAndSearch...so，Django Api只被调用一次？

或者是否有其他实现此功能的方法？

django

reactjs

django-rest-framework

material-table

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-09 19:14:20

我看了一下blog，我认为它还可以改进。(如果我错了，请纠正我，因为我是新手)。我用来解决这个问题的方法是使用过滤器头部，我认为这比使用固定的行更好。步骤1:将筛选设置为true

  options={{
    filtering: true
  }}

步骤2:然后使用列特定的过滤器呈现(您可以将其作为文本，选择，搜索...组件)。使用Onchange，onBlur...触发对远程数据的api调用。

 columns = [ {
  field: 'one',
  title: 'One',
  filterComponent: (metaData) => {
    return (
      <input
        type='text'
        onBlur={e => {
          // console metaData and use it as per your wish
        }}
      />
    )
  }
},
{
  field: 'two',
  title: 'Two',
  filtering: false // if you dont want to have filter for any column -add this
}]

票数 1

Stack Overflow用户

发布于 2020-06-25 03:41:55

最终...我成功地通过添加一个带有自定义字段的新行来使它工作-我写了一个关于我如何做的post，它将帮助某人。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62330321

复制

相似问题

问如何在React中为material-React上每一列实现自定义搜索远程数据
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中为material-React上每一列实现自定义搜索远程数据EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中为material-React上每一列实现自定义搜索远程数据
EN