javascript - 如何在 React 中收集所有选中复选框的 ID 并将值推送到数组

Question

我正在将一个旧的多项选择测验应用程序从 Blaze 迁移到 React。

该应用程序从数据库中获取测验，然后针对每个问题循环答案并为每个问题打印一个复选框。

每个问题的每个答案都在一个表单中，提交表单时，我使用 jQuery 来获取每个 :checked 复选框的 ID。然后，这些 ID 被推送到一个数组并发送到服务器以与正确答案进行比较。

现在我正在使用 React，我在复制此功能时遇到了一些困难，因为使用复选框并不相同。

将选中的复选框的值获取到数组中的最佳方法是什么？

这是我的代码，其中尽可能多地删除了不相关的数据:

评估.jsx

class Assessment extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { module } = this.props.params;
        const { loading, modules, assessment } = this.props;
        return (
            <div className="Assessment">
                <div className="section">
                    <form onSubmit={ this.submitForm }>
                        { assessment.questions.map((question) => {
                            return <AssessmentQuestion question={question} key={question.number}/>
                        })}
                        <button className="btn btn-action btn-block" type="submit">Submit Assessment</button>
                    </form>
                </div>
            </div>
        )
    }
}

评估问题.jsx

class AssessmentQuestion extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { question } = this.props;
        return (
            <div className="question" data-number={question.number}>
                <p>
                    {question.number}) {question.question}
                </p>

                { question.answers.map((answer) => {
                    return <div className="checkbox">
                        <label>
                            <input type="checkbox" name={question.number} value={answer.letter} id={answer.number, answer.letter}/>
                            { answer.answer }
                        </label>
                    </div>/>
                })}
            </div>
        )
    }
}

如您所见，我正在循环遍历每个问题，并针对每个问题循环遍历每个答案并打印一个复选框。当用户在父“Assessment.jsx”组件中提交表单时，我想收集每个选中复选框的 id 并将其推送到数组中，以便我可以发送到服务器进行评分。

非常感谢任何帮助

Answer 1

有几种方法可以解决这个问题。更简单的方法(更接近您之前的解决方案)是使用 React ref 。 https://facebook.github.io/react/docs/refs-and-the-dom.html您可以向复选框添加引用，然后过滤到选中的复选框。

另一种选择(也是更“Reacty”的方法)是使用 React 状态管理所有这些“检查”逻辑。基本上，您的 Assesment.jsx 类将跟踪状态，然后在提交时将其发送到表单。您创建一个函数来更新问题名称和答案的状态，并将该函数作为 onClick 回调传递给您的 AssesmentQuestion 类。