基于CDN引入Intro.js实现弹窗‘不再显示’复选框及多步骤取值、后端传参问题咨询

嘿，我来帮你搞定这个Intro.js多步骤复选框拿不到值的问题！

首先得搞清楚为啥会出这个状况：Intro.js在切换步骤的时候，会销毁上一步的提示框DOM元素，重新渲染当前步骤的内容。你最开始只在组件挂载时给第一个出现的复选框加了监听，但后续步骤的复选框是步骤切换后才生成的，根本没绑定点击事件，自然拿不到它们的状态。

下面给你几个可行的解决方案，从简单改代码到更符合React思维的优雅写法都有：

方案一：利用Intro.js的onchange事件动态绑定监听 #

这个方法改动最小，不用大改你现有代码，核心就是每次步骤切换时，给当前步骤的复选框重新绑定事件：

const HomePage: React.FunctionComponent<Props> = ({ id }: Props) => { 
  // 用对象存储不同复选框的状态，键对应复选框的id
  const [checkTourStates, setCheckTourStates] = React.useState<Record<string, boolean>>({});

  React.useEffect(() => { 
    if ((window as any).introJs) { 
      const introInstance = (window as any).introJs()
        .setOptions({ 
          disableInteraction: true, 
          exitOnEsc: false, 
          exitOnOverlyClicking: false, 
          overlayOpacity: 0.7, 
          showBullets: false, 
          showProgress: false, 
          showStepNumbers: false, 
          tooltipClass: "customTooltip", 
          steps: [ 
            { 
              title: "Welcome", 
              intro: `Hello World! 👋 `, 
              element: document.querySelector("#logoHeighlight"), 
              tooltipClass: "welcomeTooltip", 
            }, 
            { 
              // 修正了你原来的style语法错误
              intro: `<span style='color: red;'>step 1👋</span>`, 
              element: document.querySelector("#cart"), 
            }, 
            { 
              intro: `Go to plp page <label for='donotShowMeAgain'> Do Not Show Me Again </label><input type='checkbox' id='donotShowMeAgain'>`, 
              element: document.querySelector("#HeaderSignIn"), 
            },
            // 假设新增一个带复选框的步骤
            {
              intro: `Another step <label for='enableFeature'> Enable Feature </label><input type='checkbox' id='enableFeature'>`,
              element: document.querySelector("#someElement"),
            }
          ], 
        })
        // 关键：每次切换步骤时，重新绑定当前步骤的复选框事件
        .onchange(function() {
          // 先移除之前的监听，避免重复绑定
          document.querySelectorAll('.introjs-tooltip input[type="checkbox"]').forEach(checkbox => {
            checkbox.removeEventListener('click', handleCheckboxChange);
          });
          // 给当前步骤的复选框加监听
          document.querySelectorAll('.introjs-tooltip input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('click', handleCheckboxChange);
          });
        })
        .onbeforeexit(function () { 
          console.log("引导即将完成，当前复选框状态：", checkTourStates);
          // 这里把状态传给后端
          // fetch('/api/save-tour-preferences', { 
          //   method: 'POST', 
          //   headers: { 'Content-Type': 'application/json' },
          //   body: JSON.stringify(checkTourStates) 
          // })
        }) 
        .start(); 

      return () => { 
        // 组件卸载时清理所有监听，避免内存泄漏
        document.querySelectorAll('.introjs-tooltip input[type="checkbox"]').forEach(checkbox => {
          checkbox.removeEventListener('click', handleCheckboxChange);
        });
        introInstance.exit(); // 销毁Intro实例
      }; 
    } 
  }, []); 

  const handleCheckboxChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    setCheckTourStates(prev => ({
      ...prev,
      [target.id]: target.checked
    }));
  };

  console.log("所有复选框状态：", checkTourStates);

  return ( 
    <Page data-test-selector="homePage" className="homePageContainer"> 
      <Zone contentId={id} zoneName="Content" requireRows /> 
      <AddToListModal /> 
    </Page> 
  ); 
}; 

方案二：用React组件自定义Tooltip内容（更符合React思维） #

如果想摆脱直接操作DOM的方式，可以把每个步骤的内容写成React组件，再转成HTML字符串传给Intro.js：

首先引入renderToString：

import ReactDOMServer from 'react-dom/server';

然后定义步骤内容组件：

const Step3Content = ({ onChange }: { onChange: (checked: boolean) => void }) => (
  <div>
    Go to plp page 
    <label htmlFor='donotShowMeAgain'> Do Not Show Me Again </label>
    <input 
      type='checkbox' 
      id='donotShowMeAgain'
      onChange={(e) => onChange(e.target.checked)}
    />
  </div>
);

const Step4Content = ({ onChange }: { onChange: (checked: boolean) => void }) => (
  <div>
    Another step 
    <label htmlFor='enableFeature'> Enable Feature </label>
    <input 
      type='checkbox' 
      id='enableFeature'
      onChange={(e) => onChange(e.target.checked)}
    />
  </div>
);

接着在Intro配置里用renderToString转换组件：

// 在useEffect的steps配置中
steps: [
  // ...其他步骤
  {
    intro: ReactDOMServer.renderToString(
      <Step3Content onChange={(checked) => setCheckTourStates(prev => ({...prev, donotShowMeAgain: checked}))} />
    ),
    element: document.querySelector("#HeaderSignIn"),
  },
  {
    intro: ReactDOMServer.renderToString(
      <Step4Content onChange={(checked) => setCheckTourStates(prev => ({...prev, enableFeature: checked}))} />
    ),
    element: document.querySelector("#someElement"),
  }
],

这种方式把React组件转成静态HTML，事件通过闭包绑定，不会因为DOM重建丢失，写法也更符合React习惯。

方案三：使用Intro.js官方React封装库（最推荐） #

Intro.js有官方的React封装intro.js-react，用这个库可以完全用React的方式写引导，不用操作DOM，状态管理更轻松：

先安装依赖：

npm install intro.js-react intro.js

然后改写代码：

import { IntroJs, Step } from 'intro.js-react';
import 'intro.js/introjs.css';

const HomePage: React.FunctionComponent<Props> = ({ id }: Props) => { 
  const [isOpen, setIsOpen] = React.useState(true);
  const [checkTourStates, setCheckTourStates] = React.useState<Record<string, boolean>>({});

  const handleExit = () => {
    console.log("引导完成，复选框状态：", checkTourStates);
    // 调用接口传给后端
    // fetch('/api/save-preferences', { 
    //   method: 'POST', 
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(checkTourStates) 
    // })
    setIsOpen(false);
  };

  return ( 
    <>
      <Page data-test-selector="homePage" className="homePageContainer"> 
        <Zone contentId={id} zoneName="Content" requireRows /> 
        <AddToListModal /> 
        {/* 给需要引导的元素加id */}
        <div id="logoHeighlight">Logo</div>
        <div id="cart">Cart</div>
        <div id="HeaderSignIn">Sign In</div>
        <div id="someElement">Other Element</div>
      </Page>

      <IntroJs
        isOpen={isOpen}
        onExit={handleExit}
        options={{
          disableInteraction: true,
          exitOnEsc: false,
          exitOnOverlyClicking: false,
          overlayOpacity: 0.7,
          showBullets: false,
          showProgress: false,
          showStepNumbers: false,
          tooltipClass: "customTooltip",
        }}
      >
        <Step
          element="#logoHeighlight"
          title="Welcome"
          tooltipClass="welcomeTooltip"
        >
          Hello World! 👋
        </Step>
        <Step element="#cart">
          <span style={{color: 'red'}}>step 1👋</span>
        </Step>
        <Step element="#HeaderSignIn">
          <div>
            Go to plp page 
            <label htmlFor='donotShowMeAgain'> Do Not Show Me Again </label>
            <input 
              type='checkbox' 
              id='donotShowMeAgain'
              onChange={(e) => setCheckTourStates(prev => ({...prev, donotShowMeAgain: e.target.checked}))}
            />
          </div>
        </Step>
        <Step element="#someElement">
          <div>
            Another step 
            <label htmlFor='enableFeature'> Enable Feature </label>
            <input 
              type='checkbox' 
              id='enableFeature'
              onChange={(e) => setCheckTourStates(prev => ({...prev, enableFeature: e.target.checked}))}
            />
          </div>
        </Step>
      </IntroJs>
    </>
  ); 
}; 

这个方案是最推荐的，完全用React的方式管理状态和组件，代码清晰易维护，不用再纠结DOM操作的问题。

最后再提两个小细节：

1. 你原来的代码里有个语法错误：intro: "<style>{color: 'red';};</style>step 1👋 ,` 我已经在方案里修正成了正确的内联样式写法。
2. 不管用哪种方案，在引导完成的回调（onbeforeexit或onExit）里，把收集到的复选框状态通过API传给后端就可以了。

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