Ant Design Radio 切换 Tabs 页面示例：实现实名认证和在线签署功能

本文将介绍如何使用 Ant Design 的 Radio 组件来切换 Tabs 页面，实现实名认证和在线签署功能。

目标：点击 Radio 按钮，切换到对应的 Tab 页面，展示不同的内容。

实现步骤:

定义状态变量：使用 useState 钩子函数定义一个状态变量 mode，用于保存当前选中的 Radio 值和 Tab 的 key 值，初始值为 'verify'，对应实名认证页面。
设置 Radio.Group 组件：

使用 onChange 属性将 handleModeChange 函数绑定为选中事件的处理函数。
使用 value 属性将 mode 的值绑定到 Radio.Group 组件上，实现选中状态的同步。

设置 Tabs 组件：

使用 activeKey 属性将 mode 的值绑定到 Tabs 组件上，实现 Tab 页面的切换。

代码示例

import { Radio, Tabs } from 'antd';
import { useState } from 'react';

const YourComponent = () => {
  const [mode, setMode] = useState('verify'); // 初始化状态变量为 'verify'

  const handleModeChange = (e) => {
    setMode(e.target.value); // 更新状态变量为选中的 Radio 值
  };

  return (
    <>
      <Radio.Group onChange={handleModeChange} value={mode}>
        <Radio.Button value='verify'>实名认证</Radio.Button>
        <Radio.Button value='sign'>开通在线签署</Radio.Button>
      </Radio.Group>

      <Tabs activeKey={mode}>
        <Tabs.TabPane tab={'实名认证'} key={'verify'}>
          <Verify />
        </Tabs.TabPane>
        <Tabs.TabPane tab={'开通在线签署'} key={'sign'}>
          <ESeal />
        </Tabs.TabPane>
      </Tabs>
    </>
  );
};

export default YourComponent;

解释:

useState 钩子函数用于创建名为 mode 的状态变量，并将其初始值设置为 'verify'。
handleModeChange 函数通过调用 setMode 方法来更新 mode 的值，使其等于选中的 Radio 值。
Radio.Group 组件的 onChange 属性将 handleModeChange 函数绑定为选中事件的处理函数。value 属性将 mode 的值绑定到 Radio.Group 组件上，实现选中状态的同步。
Tabs 组件的 activeKey 属性将 mode 的值绑定到 Tabs 组件上，实现 Tab 页面的切换。

总结

通过使用 useState 钩子函数、事件监听和属性绑定，我们可以轻松地实现 Radio 切换 Tabs 页面，为用户提供更便捷的操作体验。

注意：

Verify 和 ESeal 分别代表实名认证和在线签署功能对应的组件，需要根据实际情况进行替换。
以上代码示例只是基础实现，可以根据实际需求进行修改和扩展。

Ant Design Radio 切换 Tabs 页面示例：实现实名认证和在线签署功能