How to implement search by conditions in react

React method to implement search by conditions: 1. Define an object in the state; 2. Set the drop-down box click event onChange to receive the corresponding ID for each drop-down box selected; 3. The object can be attached to the interface request parameters.

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"

The above is the detailed content of How to implement search by conditions in react. For more information, please follow other related articles on the PHP Chinese website!