React Ant Design Radio 切换 Tabs 页面并请求接口

如何点击 Radio 切换到 Tab 页面，且每次切换会请求当前页面的接口？

您可以通过在handleModeChange函数中切换mode的值来实现点击Radio按钮切换到对应的Tab页面，并在每次切换时请求当前页面的接口。

首先，您需要在组件的状态中添加一个mode变量来保存当前选中的模式。然后，在handleModeChange函数中更新mode的值为选中的模式。最后，在Tabs组件中根据mode的值来选择要显示的TabPane。

以下是一个示例代码，演示了如何实现该功能：

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

const YourComponent = () => {
  const [mode, setMode] = useState('verify');

  const handleModeChange = (e) => {
    setMode(e.target.value);
  };

  const fetchData = () => {
    // 发起请求当前页面的接口
    console.log('请求当前页面的接口');
  };

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

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

export default YourComponent;

在上述示例代码中，handleModeChange函数被传递给Radio.Group组件的onChange属性，用于监听Radio按钮的选中状态变化。在函数内部，我们使用setMode函数来更新mode的值为选中的模式。

Tabs组件的activeKey属性被设置为mode的值，这样就会根据mode的变化来切换显示的TabPane。

此外，我们还在Tabs组件的onChange属性中调用了fetchData函数，该函数用于请求当前页面的接口。您可以在该函数中编写实际的接口请求逻辑。

请注意，上述示例代码中的Verify和ESeal组件是根据您提供的示例代码中的<Verify />和<ESeal />进行替换的，以便在每个TabPane中显示相应的内容。