How to implement search by conditions in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to implement search by conditions in react?

react design pro implements multi-condition query data

1. Description:

For the backend management system, when writing the business interface, Joint querying data with multiple conditions is the most basic business requirement. Generally, multi-condition queries pass in the ID or other values ​​of the corresponding fields.

2. Implemented interface effect:

3. Implementation idea:

First define an object to receive the corresponding response for each selected drop-down box. Save the ID, and then finally attach the object to the interface request parameter.

For example: The data format required by my query interface here

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

4. Code implementation:

1. First define an object in the state:

2. Set the drop-down box click event onChange

3. Assign value (only the code of the supplier drop-down box is shown here, other drop-down boxes The box is the same as the one):

#Finally, obtain the corresponding results and perform the corresponding query, and a multi-condition query is implemented.

5. Summary

Here I use setState to dynamically assign values ​​to object elements. This is the only way I can think of at the moment. I don’t know if there is a better way. If I hope someone can teach me.

Recommended learning: "react video tutorial"