列表搜索条件的组件动态渲染及查询重置_pc端react开发搜索条件展开再收起后条件被重置问题-优快云博客

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/121566022

本文探讨了如何在React.js应用中实现列表搜索条件的动态组件渲染，详细介绍了创建搜索组件的过程，并讲解了如何设置重置功能，确保用户可以轻松清除搜索条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搜索条件topBase：

[
    {
        "label": "影片名称",
        "key": "film",
        "type": "input",
        "placeholder": "请输入影片名称",
        "default_value": "无间道",
        "value_options": [],
        "required": true
    },
    {
        "label": "城市单选",
        "key": "city",
        "type": "select",
        "placeholder": "请选择城市",
        "default_value": "01",
        "value_options": [
            {
                "key": "01",
                "value": "北京"
            },
            {
                "key": "02",
                "value": "上海"
            }
        ],
        "required": false
    },
    {
        "label": "状态多选",
        "key": "print_state",
        "type": "select_multiple",
        "placeholder": "请选择取票状态",
        "default_value": "01|02",
        "value_options": [
            {
                "key": "01",
                "value": "已取票"
            },
            {
                "key": "02",
                "value": "未取票"
            },
            {
                "key": "03",
                "value": "取票中"
            },
        ],
        "required": false
    },
    {
        "label": "年月日",
        "key": "date_yymmdd",
        "type": "date_picker",
        "placeholder": "请输入开场时间",
        "default_value": "2015-06-06",
        "value_options": [],
        "required": false
    },
    {
        "label": "年月日时分",
        "key": "date_yymmddhhmm",
        "type": "date_picker_time",
        "placeholder": "请输入开场时间",
        "default_value": "2019-08-12 17:08",
        "value_options": [],
        "required": false
    },
    {
        "label": "范围年月日",
        "key": "range_yymmdd",
        "type": "range_picker",
        "placeholder": "请输入起止时间",
        "default_value": "2015-06-06|2019-07-20",
        "value_options": [],
        "required": false
    },
    {
        "label": "范围年月日时分",
        "key": "range_yymmddhhmm",
        "type": "range_picker_time",
        "placeholder": "请输入起止时间",
        "default_value": "2015-06-06 07:08|2019-07-20 17:08",
        "value_options": [],
        "required": false
    },
    {
        "label": "树单选",
        "key": "tree_city",
        "type": "tree_select",
        "placeholder": "请选择城市",
        "default_value": "shanghai",
        "value_options": [
            {
                "title": "华东",
                "value": "huadong",
                "key": "0-0",
                "selectable": false,
                "children": [
                    {
                        "title": "上海",
                        "value": "shanghai",
                        "key": "0-0-0",
                    },
                ],
            },
            {
                "title": "东北",
                "value": "dongbei",
                "key": "0-1",
                "selectable": false,
                "children": [
                    {
                        "title": "辽宁",
                        "value": "liaoning",
                        "key": "0-1-0",
                        "selectable": false,
                        "children": [
                            {
                                "title": "沈阳",
                                "value": "shenyang",
                                "key": "0-1-0-0",
                            },
                            {
                                "title": "大连",
                                "value": "dalian",
                                "key": "0-1-0-1",
                            },
                        ],
                    },
                ],
            },
        ],
        "required": false
    },
    {
        "label": "树多选",
        "key": "tree_city_more",
        "type": "tree_select_multiple",
        "placeholder": "请选择多个城市",
        "default_value": "shanghai|dalian",
        "value_options": [
            {
                "title": "华东",
                "value": "huadong",
                "key": "0-0",
                "selectable": false,
                "children": [
                    {
                        "title": "上海",
                        "value": "shanghai",
                        "key": "0-0-0",
                    },
                ],
            },
            {
                "title": "东北",
                "value": "dongbei",
                "key": "0-1",
                "selectable": false,
                "children": [
                    {
                        "title": "辽宁",
                        "value": "liaoning",
                        "key": "0-1-0",
                        "selectable": false,
                        "children": [
                            {
                                "title": "沈阳",
                                "value": "shenyang",
                                "key": "0-1-0-0",
                            },
                            {
                                "title": "大连",
                                "value": "dalian",
                                "key": "0-1-0-1",
                            },
                        ],
                    },
                ],
            },
        ],
        "required": false
    },
]

搜索组件：

import React, {
    PureComponent } from 'react';
import moment from 'moment';
import {
    Form, Row, Col, Input, Button, Select, DatePicker, TreeSelect } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const {
    Option } = Select;
const {
    RangePicker } = DatePicker;

const formatCondition = (type, value) => {
   
    if (!value) return "";
    switch (type) {
   
        case "select_multiple":
        case "tree_select_multiple":
            if (!value.length) return "";
            return value.join("|");
        case "date_picker":
            return moment(value).format("YYYY-MM-DD");
        case "date_picker_time":
            return moment(value).format("YYYY-MM-DD HH:mm");
        case "range_picker":
            if (!value.length) return "";
            return `${
     moment(value[0]).format("YYYY-MM-DD")}|${
     moment(value[1]).format("YYYY-MM-DD")}`;
        case "range_picker_time":
            if (!value.length) return "";
            return `${
     moment(value[0]).format("YYYY-MM-DD HH:mm")}|${
     moment(value[1]).format("YYYY-MM-DD HH:mm")}`;
        default:
            return value;