Reactjs 如何跨多个组件跟踪任何复选框？

我正在开发一个小型调查应用程序，它是以多步骤表单的形式构建的。有一个包含所有步骤的

组件。步骤的顺序如下：介绍>问题1>问题2>问题3>结果。我按照写过的关于CSS技巧的文章/教程，让

分别渲染每个步骤。那很好用

在3个

组件中的每一个组件中，都有任意数量的复选框，用户可以选中（使用标签），也可以不选中任何复选框。它们是完全可选的。我只列出了5种缩短时间的方法

我想做的是跟踪用户选中的任何复选框，并在列出每个问题及其选项的

组件中，突出显示匹配的问题

为了澄清，以下是

的相关代码：

const MasterForm=（）=>{
常量[CheckedQuestionOneBox，SetCheckedQuestionOneBox]=useState（[]）；
//获取问题1中的复选框
const addQuestionOne复选框=（e）=>{
console.log（如target）；
设置CheckedQuestionOneBox.push（如目标）；
console.log（选中问题框）；
};
//在返回的内部。。。
}

组件代码：

import React from 'react';

const Question1 = ({ currentStep, currentQuestion, onClickHandler, titles, checkBoxHandler }) => {
    const titleToRenderIndex = titles.map((el) => el.step).indexOf(currentStep);

    if (currentStep === 1) {
        return (
            <div className='question'>
                <h4 className='question__step'>Question {currentQuestion}/3:</h4>
                <h2 className='question__heading question__heading--astronaut'>
                    {titles[titleToRenderIndex].title}
                </h2>
                <ul className='question__list'>
                    <li>
                        <input type='checkbox' className='q1' value='1' onChange={checkBoxHandler} />
                        <label>Option #1</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='2' onChange={checkBoxHandler} />
                        <label>Option #2</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='3' onChange={checkBoxHandler} />
                        <label>Option #3</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='4' onChange={checkBoxHandler} />
                        <label>Option #4</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='5' onChange={checkBoxHandler} />
                        <label>Option #5</label>
                    </li>
                </ul>
                <button className='button button--astronaut' onClick={onClickHandler}>
                    Next Question
                </button>
            </div>
        );
    } else {
        return null;
    }
};

export default Question1;

从“React”导入React；
常量问题1=（{currentStep，currentQuestion，onClickHandler，titles，checkBoxHandler}）=>{
const titleToRenderIndex=titles.map（（el）=>el.step.indexOf（currentStep）；
如果（当前步骤===1）{
返回(
问题{当前问题}/3：
{titles[titleToRenderIndex].title}


选项1


选项2


选项3


选项4


选项5


下一个问题
);
}否则{
返回null；
}
};
导出默认问题1；

假设在看问题1时，用户选中选项#1和#4。我想把这两个储存在州里。稍后在查看结果组件时，其中“标题”和所有5个选项都列在其下方，我想突出显示#1和#4，因为它们是选中的。但同样，用户也可以不选择任何一个，这很好。因此，在该场景中，在查看结果组件时，5个选项都不会突出显示。我还需要为问题2和问题3组件提供相同的功能

那么，我如何跟踪这3个组件中每个组件中任何复选框的状态，以及在结果组件中突出显示它们

import React from 'react';

const Question1 = ({ currentStep, currentQuestion, onClickHandler, titles, checkBoxHandler }) => {
    const titleToRenderIndex = titles.map((el) => el.step).indexOf(currentStep);

    if (currentStep === 1) {
        return (
            <div className='question'>
                <h4 className='question__step'>Question {currentQuestion}/3:</h4>
                <h2 className='question__heading question__heading--astronaut'>
                    {titles[titleToRenderIndex].title}
                </h2>
                <ul className='question__list'>
                    <li>
                        <input type='checkbox' className='q1' value='1' onChange={checkBoxHandler} />
                        <label>Option #1</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='2' onChange={checkBoxHandler} />
                        <label>Option #2</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='3' onChange={checkBoxHandler} />
                        <label>Option #3</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='4' onChange={checkBoxHandler} />
                        <label>Option #4</label>
                    </li>
                    <li>
                        <input type='checkbox' className='q1' value='5' onChange={checkBoxHandler} />
                        <label>Option #5</label>
                    </li>
                </ul>
                <button className='button button--astronaut' onClick={onClickHandler}>
                    Next Question
                </button>
            </div>
        );
    } else {
        return null;
    }
};

export default Question1;