React 使用 Radio 组件实现动态页面跳转 - 监听 mode 变化

React 使用 Radio 组件实现动态页面跳转 - 监听 mode 变化

如果'mode'改变时需要跳转到不同的页面，可以通过使用'useEffect'钩子来监听'mode'的变化，并在变化时执行相应的跳转操作。

首先，导入'useEffect'和'useEffect'钩子：

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

然后，在组件中使用'useEffect'钩子来监听'mode'的变化，并在变化时执行跳转操作：

const MenuIndex = () => {
  const [mode, setMode] = useState('license');
  const history = useHistory();

  useEffect(() => {
    // 根据mode的值进行不同的跳转操作
    if (mode === 'license') {
      history.push('/licensePage');
    } else if (mode === 'legalPersonInfo') {
      history.push('/legalPersonInfoPage');
    } else if (mode === 'billingInfo') {
      history.push('/billingInfoPage');
    }
  }, [mode]);

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

  return (
    <div className='nf-page-tabChange'>
      <Radio.Group
        onChange={handleModeChange}
        value={mode}
      >
        <Radio.Button value='license'>营业执照</Radio.Button>
        <Radio.Button value='legalPersonInfo'>法人身份证</Radio.Button>
        <Radio.Button value='billingInfo'>开票信息</Radio.Button>
      </Radio.Group>
    </div>
  );
};
export default MenuIndex;

这样，当'mode'的值改变时，就会执行相应的跳转操作，导航到对应的页面。请确保在路由配置中定义了相应的路径和组件。