React 触发时显示某元素的解决方案汇总

发表于 2024-08-22 分类于 React 阅读次数： Valine：

表格 Table 触发时显示

要在 Arco Design 的 Table 组件中实现鼠标触发某行时才显示该行的某个 Button，我们可以使用以下步骤：

使用 Table 的 columns 属性定义列
在 columns 中使用 render 函数来自定义单元格内容
利用 React 的 useState 钩子来管理鼠标悬停状态
在 Table 的 onRow 属性中设置鼠标事件处理器

以下是具体的实现代码：

import React, { useState } from 'react';
import { Table, Button } from '@arco-design/web-react';
import type { TableColumnProps } from '@arco-design/web-react/es/Table';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const MyTable: React.FC = () => {
  const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);

  const columns: TableColumnProps<DataType>[] = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button
          type="primary"
          style={{ display: hoveredRowKey === record.key ? 'inline-block' : 'none' }}
        >
          操作
        </Button>
      ),
    },
  ];

  const data: DataType[] = [
    { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
    { key: '2', name: '李四', age: 28, address: '上海市浦东新区' },
    { key: '3', name: '王五', age: 45, address: '广州市天河区' },
  ];

  return (
    <Table
      columns={columns}
      data={data}
      onRow={(record) => ({
        onMouseEnter: () => setHoveredRowKey(record.key),
        onMouseLeave: () => setHoveredRowKey(null),
      })}
    />
  );
};

export default MyTable;

这段代码的工作原理如下：

我们定义了一个 hoveredRowKey 状态来跟踪当前鼠标悬停的行。
在 columns 定义中，我们为 "操作" 列添加了一个 render 函数。这个函数根据 hoveredRowKey 的值来决定是否显示按钮。
在 Table 的 onRow 属性中，我们设置了 onMouseEnter 和 onMouseLeave 事件处理器。这些处理器会更新 hoveredRowKey 的值。
当鼠标进入某一行时，该行的 key 会被设置为 hoveredRowKey，从而显示该行的按钮。
当鼠标离开行时，hoveredRowKey 被设置为 null，隐藏所有按钮。

这种方法可以确保只有在鼠标悬停在特定行上时，该行的按钮才会显示。你可以根据需要调整按钮的样式或添加其他交互效果。

如果你需要进一如果你需要进一步定制或有其他要求，可以考虑以下几点：

性能优化：如果表格数据量很大，可以考虑使用 useMemo 来优化 columns 的定义。
样式调整：你可能想要调整按钮出现和消失的过渡效果，可以使用 CSS 过渡。
多个操作按钮：如果需要显示多个操作按钮，可以将它们包装在一个容器中。

这里是一个更加完善的示例，包含了上述优化：

import React, { useState, useMemo } from 'react';
import { Table, Button, Space } from '@arco-design/web-react';
import type { TableColumnProps } from '@arco-design/web-react/es/Table';
import './styles.css';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const MyTable: React.FC = () => {
  const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);

  const columns: TableColumnProps<DataType>[] = useMemo(() => [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space className={`action-buttons ${hoveredRowKey === record.key ? 'visible' : ''}`}>
          <Button type="primary" size="small">编辑</Button>
          <Button type="primary" status="danger" size="small">删除</Button>
        </Space>
      ),
    },
  ], [hoveredRowKey]);

  const data: DataType[] = [
    { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
    { key: '2', name: '李四', age: 28, address: '上海市浦东新区' },
    { key: '3', name: '王五', age: 45, address: '广州市天河区' },
  ];

  return (
    <Table
      columns={columns}
      data={data}
      onRow={(record) => ({
        onMouseEnter: () => setHoveredRowKey(record.key),
        onMouseLeave: () => setHoveredRowKey(null),
      })}
    />
  );
};

export default MyTable;

对应的 CSS 文件 (styles.css):

.action-buttons {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-buttons.visible {
  opacity: 1;
}

这个优化版本有以下改进：

使用 useMemo 缓存 columns 定义，只有当 hoveredRowKey 变化时才重新计算。
使用 CSS 类和过渡效果来平滑显示 / 隐藏按钮。
使用 Space 组件来包装多个操作按钮，提供更好的间距控制。
使用 size="small" 属性来减小按钮尺寸，使其更适合表格行高。

这种实现方式既保证了性能，又提供了更好的用户体验。你可以根据具体需求进一步调整按钮的样式、动画效果或添加更多的交互功能好的，我们可以进一步优化和扩展这个表格组件。

列表 List 触发时显示

要在 Arco Design 的 List 组件中实现鼠标触发某行时才显示该行的某个 Button，我们可以采用类似于 Table 的方法。以下是实现步骤和代码：

使用 List 组件来渲染列表
在 List.Item 中自定义内容
使用 React 的 useState 钩子来管理鼠标悬停状态
为每个 List.Item 添加鼠标事件处理器

以下是具体的实现代码：

import React, { useState } from 'react';
import { List, Button } from '@arco-design/web-react';
import './styles.css';

interface ListItemType {
  id: string;
  title: string;
  description: string;
}

const MyList: React.FC = () => {
  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);

  const data: ListItemType[] = [
    { id: '1', title: '标题1', description: '描述1' },
    { id: '2', title: '标题2', description: '描述2' },
    { id: '3', title: '标题3', description: '描述3' },
  ];

  return (
    <List
      className="custom-list"
      dataSource={data}
      render={(item) => (
        <List.Item
          key={item.id}
          onMouseEnter={() => setHoveredItemId(item.id)}
          onMouseLeave={() => setHoveredItemId(null)}
        >
          <div className="list-item-content">
            <div>
              <h3>{item.title}</h3>
              <p>{item.description}</p>
            </div>
            <Button
              type="primary"
              className={`action-button ${hoveredItemId === item.id ? 'visible' : ''}`}
            >
              操作
            </Button>
          </div>
        </List.Item>
      )}
    />
  );
};

export default MyList;

对应的 CSS 文件 (styles.css):

.custom-list .list-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.custom-list .action-button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-list .action-button.visible {
  opacity: 1;
}

这段代码的工作原理如下：

我们定义了一个 hoveredItemId 状态来跟踪当前鼠标悬停的列表项。
在 List 组件的 render 属性中，我们为每个 List.Item 自定义了内容。
每个 List.Item 都有 onMouseEnter 和 onMouseLeave 事件处理器，用于更新 hoveredItemId。
按钮的显示通过 CSS 类来控制。当 hoveredItemId 匹配当前项的 id 时，按钮会显示出来。
使用 CSS 过渡效果使按钮的出现和消失更加平滑。

这种实现方式可以确保只有在鼠标悬停在特定列表项上时，该项的按钮才会显示。你可以根据需要调整按钮的样式或添加其他交互效果。