本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react 怎么實現(xiàn)按條件搜索？

react design pro 實現(xiàn)多條件進行查詢數(shù)據(jù)

一、描述：

對于后臺管理系統(tǒng)，在編寫業(yè)務(wù)界面，多條件進行聯(lián)合查詢數(shù)據(jù)是最基礎(chǔ)的業(yè)務(wù)需求，一般多條件查詢都是傳入相應(yīng)字段的ID或者其它值。

二、實現(xiàn)的界面效果：

三、實現(xiàn)思路：

先定義一個對象，用于接收每選擇一個下拉框都進行相應(yīng)的ID保存，然后最后把對象附加到接口請求參數(shù)上即可。

例如：我這里的查詢接口需要的數(shù)據(jù)格式

{ merchantId: "", page: 1, limit: 15, departDate: "", lineId: "", driverId: "", carId: "" }

四、代碼實現(xiàn)：

1.先在state里定義一個對象：

2.設(shè)置下拉框點擊事件onChange

3.賦值（這里只展示了供應(yīng)商下拉框的代碼，其它下拉框與之相同）：

最后，取得相應(yīng)的結(jié)果進行相應(yīng)的查詢，一個多條件查詢就實現(xiàn)了。

五、總結(jié)

這里我利用的是setState對對象元素進行了動態(tài)賦值，現(xiàn)目前能想到的辦法就是這樣的，不知道還有沒有更好的辦法，如果有希望大佬能教教我。

推薦學(xué)習(xí)：《react視頻教程》