给ProComponents的＜select＞框增加收缩、展开Tag列表的功能

概要

技术栈：React + AntDesign + ProComponents + Umi

功能介绍

在使用蚂蚁的 Ant Design 和 ProComponents 时常常会遇到不满足业务要求的情况，这时候就要在原组件的基础上进行二次开发，对组件本身的功能进行扩展。

本文将对<select>组件的功能进行扩展，当用户选择多个Tag时，会显示“展开”或“收缩”按钮，以提升用户体验。

完成效果如图所示：

选择的标签数量超过maxLength时，展示全部标签以及「收缩」按钮

选择的标签数量超过maxLength并点击「收缩」后，展示 maxLength 个标签以及「展开」按钮

技术细节

1. 使用 SchemaForm 组件完成表单

这里的任务需求是点击select框弹出策略列表的窗口（所以关闭了下拉窗避免累赘），供用户选择，通过 open 的状态控制弹窗打开与否。

<BetaSchemaForm
	style={{ background: 'white' }}
	formRef={formRef}
	columns={[
	{
		title：‘策略’，
		dataIndex: 'strategy_id',
		fieldProps: {
			mode: 'multiple',
			dropdownstyle：｛ display：‘none’｝，  // 清空下拉框的选项
			className: 'pxdy'
			tagRender: handleTagRender,
			onClick：（）=> ｛    // 点击框内任意位置会打开策略列表弹窗
				setOpen (true)
			｝
		},
		request: async（）=>{
			const data = await runLoadStrategy()
			return data
		},
	},
>

---

此处回顾下 SchemaForm 组件的各个属性的用法：

1. columns

• 类型: Array
• 描述: 定义表单的各个字段，每个字段是一个对象，包含字段的属性配置。
• 属性:
  • title: 字段的标题。
  • dataIndex: 字段对应的数据键名。
  • valueType: 字段的类型，如 text, select, date, money 等。
  • fieldProps: 传递给字段组件的属性，如 placeholder, mode, options等。
  • formItemProps: 传递给 Form.Item 的属性，如 rules（表单校验规则）。
  • renderFormItem: 自定义表单项的渲染函数。
  • request: 异步请求数据的方法，用于动态获取选项等。

2. formRef

• 类型: React.RefObject
• 描述: 用于获取表单实例的引用，可以用于调用表单方法如 validateFields、resetFields 等。

3. layout

• 类型: ‘horizontal’ | ‘vertical’ | ‘inline’
• 描述: 设置表单布局方式，默认为 ‘horizontal’。在 ‘horizontal’ 布局下，标签和表单控件在同一行，‘vertical’ 是上下排列，‘inline’ 是内联排列。

4. onFinish

• 类型: (values) => void
• 描述: 表单提交时的回调函数，接收表单数据 values 作为参数。

5. onValuesChange

• 类型: (changedValues, allValues) => void
• 描述: 表单字段值改变时的回调函数，changedValues 是变化的字段数据，allValues 是所有字段的当前数据。

6. initialValues

• 类型: Object
• 描述: 设置表单的初始值。

7. submitter

• 类型: boolean | { resetButtonProps?: ButtonProps; submitButtonProps?:ButtonProps }
• 描述: 控制表单提交区域的显示和配置，可以自定义提交按钮和重置按钮的属性。

8. rowProps

• 类型: Object
• 描述: 配置行的布局，如 gutter。

9. colProps

• 类型: Object
• 描述: 配置列的布局，如 span。

10. actionRef

• 类型: React.RefObject
• 描述: 用于获取表单动作的引用，如提交、重置等操作。

11. readonly

• 类型: boolean
• 描述: 是否设置表单为只读模式。

12. transformValues

• 类型: (values) => any
• 描述: 在表单提交前对表单数据进行处理的函数。

13. request

• 类型: () => Promise
• 描述: 异步获取表单默认值或初始化数据的函数。

14. grid

• 类型: boolean
• 描述: 是否启用栅格系统布局表单。

---

2. 自定义渲染选择框内的Tag

const handleTagRender = ({ label, value, closable }) => {
    let len = selectedTags.length;
    let pureTag = (
      <div className={styles.customItem} key={value}>
        <div className={styles.customContent}>{label}</div>
        <div className={styles.customRemove} onClick={(e) => onClose(value, e)}>
          <CloseOutlined />
        </div>
      </div>
    );

    let expandButton = (
      <Button
        className={styles.customButton}
        icon={<DoubleRightOutlined rotate={90} />}
        onClick={expandClick}
        key="expandButton"
      />
    );

    let collapseButton = (
      <Button
        className={styles.customButton}
        icon={<DoubleLeftOutlined rotate={90} />}
        onClick={collapseClick}
        key="collapseButton"
      />
    );

    if (!expanded && selectedTags.indexOf(value) === maxLength - 1) {
      // 收起状态，且当前标签是可见的最后一个时，显示展开按钮
      return (
        <React.Fragment key={value}>
          {pureTag}
          {expandButton}
        </React.Fragment>
      );
    }

    if (expanded && selectedTags.indexOf(value) === len - 1) {
      // 展开状态，且当前标签是最后一个时，显示收起按钮
      return (
        <React.Fragment key={value}>
          {pureTag}
          {collapseButton}
        </React.Fragment>
      );
    }

    // 其他情况只显示标签
    return pureTag;
  };

3. 定义点击事件等

通过expanded 的状态来确认当前展开还是收缩

  const [selectedTags, setSelectedTags] = useState([]);
  const [expanded, setExpanded] = useState(false);
  const maxLength = 3; // 最多显示标签数

  const onClose = (value, e) => {
    e.preventDefault();
    setSelectedTags(selectedTags.filter(tag => tag !== value));
  };

  const expandClick = () => setExpanded(true);
  const collapseClick = () => setExpanded(false);

BTW

• 调整按钮在 select 框内的位置时可能用到：

span {      //在按钮的父元素上定义
	display:flex;
	max-length:100%;
}

• e.preventDefault() 在本任务中的作用：
  出现在 onClose 函数内，当用户点击某个标签项上的关闭按钮时，该按钮通常会触发默认的浏览器行为，例如标签项外层的select 框的点击事件。
  

为了避免触发这个点击事件，阻止选择框内点击事件冒泡，就可以避免影响到外层点击事件。