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

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

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

一、描述：

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

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

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

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

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

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

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

1.先在state里定義一個(gè)對(duì)象：

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

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

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

五、總結(jié)

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

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