react中设置展开收起的查询表单

在React中，创建一个可以展开和收起的查询表单通常涉及到组件的状态管理和DOM操作。你可以使用内置的`useState` Hook 来管理表单是否展开的开关状态，同时配合`JSX`和可能的第三方库如`react-collapse`或者自定义的CSS动画来实现这个功能。

下面是一个简单的示例：

import React, { useState } from 'react';

// 引入用于处理折叠效果的第三方库 (这里假设我们使用了react-collapsible)
import { Collapsible } from 'react-collapsible';

const QueryForm = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  // 展开收起函数
  const toggleForm = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div>
      <button onClick={toggleForm}>
        {isExpanded ? '收起查询' : '展开查询'}
      </button>
      {isExpanded && (
        <Collapsible active={isExpanded} title="查询表单">
          {/* 在这里放置你的表单内容 */}
          <form>
            {/* 表单输入、选择器等 */}
          </form>
        </Collapsible>
      )}
    </div>
  );
};

export default QueryForm;

在这个例子中，点击按钮会切换`isExpanded`的状态，当状态为`true`时，`Collapsible`组件的内容会被显示出来。如果需要更复杂的动画效果，可以考虑使用`react-transition-group`或其他CSS动画库。