如何在intro.js-react中通过onChange在指定步骤执行函数？

直接利用Steps组件的onChange属性就能实现，这个回调会在步骤切换时触发，你只需要在回调里判断当前步骤的标识（比如步骤序号或目标元素选择器），然后执行对应的自定义函数就行，不用套intro.js原生的方案。

示例代码 #

import { Steps } from 'intro.js-react';
import 'intro.js/introjs.css';
import { useState } from 'react';

function YourComponent() {
  const [isTourActive, setIsTourActive] = useState(true);

  // 定义教程步骤
  const tourSteps = [
    {
      element: '.s1',
      intro: '这是第一步',
      step: 1
    },
    {
      element: '.s2',
      intro: '这是第二步',
      step: 2
    },
    {
      element: '.s3',
      intro: '这是第三步',
      step: 3
    }
  ];

  // 步骤2要执行的自定义函数
  const customStep2Function = () => {
    console.log('触发步骤2的自定义操作');
    // 这里写你的业务逻辑：比如修改组件状态、调用接口、操作DOM等
  };

  // 步骤切换的处理函数
  const handleStepChange = (currentStep) => {
    // 通过步骤序号或目标元素选择器判断是否是目标步骤
    if (currentStep.step === 2 || currentStep.element === '.s2') {
      customStep2Function();
    }
  };

  return (
    <div>
      {/* 页面元素 */}
      <div className="s1">第一步对应元素</div>
      <div className="s2">第二步对应元素</div>
      <div className="s3">第三步对应元素</div>

      {/* intro.js-react的Steps组件 */}
      <Steps
        enabled={isTourActive}
        steps={tourSteps}
        onChange={handleStepChange} // 绑定步骤切换回调
      />
    </div>
  );
}

export default YourComponent;

关键说明 #

• onChange的参数currentStep包含当前步骤的所有配置信息，你可以用step（步骤序号）或者element（目标元素的CSS选择器）来精准匹配要触发函数的步骤。
• 这个回调会在步骤切换完成后立即触发，刚好满足“进入特定步骤时执行自定义逻辑”的需求。
• 如果需要给多个步骤绑定不同的自定义函数，直接扩展handleStepChange里的判断逻辑就行，比如用switch语句：

const handleStepChange = (currentStep) => {
  switch(currentStep.step) {
    case 2:
      customStep2Function();
      break;
    case 3:
      customStep3Function();
      break;
    // 其他步骤的逻辑
  }
};

内容的提问来源于stack exchange，提问作者Ciremal