[发明专利]一种基于react的多条件组合搜索控件的创建方法

说明书

本发明公开了一种基于react的多条件组合搜索控件的创建方法，包括以下步骤：(1)使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；(4)用户对搜索条件进行选择或输入；(5)编写搜索函数；(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。采用该方法创建的搜索控件可以实现对搜索结果的精准定位，尤其是针对有大量订单往来的管理系统，可以提高利用效率。

技术领域

本发明涉及搜索控件技术领域，具体涉及一种基于react的多条件组合搜索控件的创建方法。

背景技术

作为一种构建用户界面的工具，毫无疑问React已经是最流行的前端框架之一，它具有很多非常实用而便捷的功能性组件。在实际的开发过程中，搜索控件的使用率是很高的，它需要获取用户输入或选择的数据，将其传送至后台，通过后台数据库的筛选，得到即将展示的搜索结果。无论是交易系统、管理系统，都必不可少的应用到搜索控件，然而React所提供给我们的搜索组件的使用较为单一刻板，并且缺乏多条件组合搜索功能，常常不适用于具体的业务实现，例如进销存系统，它常常需要非常精准甚至苛刻的搜索条件，并且库存量级或者说流水量级越是庞大，搜索条件就越加复杂，否则，很容易出现成千上万条相似的搜索结果。因此，只有一个搜索条件的原生组件，是远远达不到需求方所要求的效果的。

发明内容

为了克服上述技术缺陷，本发明提供了一种基于react的多条件组合搜索控件的创建方法，采用该方法创建的搜索控件可以实现对搜索结果的精准定位，尤其是针对有大量订单往来的管理系统，可以提高利用效率。

为了达到上述技术效果，本发明采用如下技术方案：

一种基于react的多条件组合搜索控件的创建方法，其特征在于，包括以下步骤：

(1)使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；

(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；

(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；

(4)用户对搜索条件进行选择或输入，并按下搜索按钮，通过event.targe直接获取用户选择或输入的dom元素，将其装入条件数组中；

(5)编写搜索函数，当用户按下搜索按钮时，首先判断搜索条件数组是否为空，目的在于满足后台查询接口有值才传参数的要求，避免误操作，如果数组不为空，便将打包好的数据数组发送给后台作为条件进行搜索；

(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。

进一步的技术方案为，所述搜索框组件包括日期选择控件、下拉框、输入框、搜索按钮。

下面对本发明进行进一步的说明，本发明基于React技术，使用ES6的基本方法进行相关的逻辑控制，对ant design的DatePicker、Select、Button、Input进行了功能绑定并二次封装，实现了通过生成日期、组织机构、币种、订单号等多种条件对目标订单的精准搜索。相较于以往的原生搜索控件，本发明实现了对搜索结果的精准定位，避免了大量级系统在查询过程中出现成千上万条相似的搜索结果的问题。具体表现为可以通过选择或输入订单的组织机构来源、订单金额、订单所使用的币种、订单的生成日期等条件共同搜索目标订单。