javascript - ReactJS - 获取父元素中的子元素并循环执行每个子元素的方法

Question

我是 ReactJS 的初学者，我有一个简单的问题...

我可以捕获所有子元素并在父元素中循环这些元素吗？我看到很多示例来修改触发方法的单个子元素。

基本上，我有一个测试页面，这里我有一个独特选择的部分。我想实现一个按钮(在父级中)来帮助我验证答案是正确还是错误(一次全部)。

代码如下:

https://mbv401920150.github.io/Math/code.js

实际页面在哪里:

https://mbv401920150.github.io/Math

欢迎任何评论!

Answer 1

所以你可能认为这比它需要的要困难得多:)

处理这种情况的最简单方法，甚至可能清理您的代码(代码太多所以我只是略读 XD)是为每个问题创建一个数组并将其单独存储在 questionList.js 或其他东西:

export const questions = [
    {
        key: "q1",
        answer: "a",
        options: {},
    }
}

对于这些问题中的每一个，您都可以存储您需要访问的任何信息(我不确定您需要什么)，选项是无穷无尽的。

接下来在父组件上设置状态:

this.state = {
    answers: []
}

现在它要做的是在用户将答案输入每个组件时跟踪答案。

现在您可以使用 questionList 以一种非常简洁的方式将它们放在一起，您可以映射每个问题以将其呈现出来并使用 onChange 传回值:

{questionList.map(question => {
        return (
            <Question 
                onChange={(e) => this.handleQuestionAnswered(question, e) 
                data={question}
            />
        )
    })    
}

其中 this.handleQuestionAnswered() 获取问题和答案并更新状态:

this.setState(prevState => {
    const newAnswers = prevState.answers;
    newAnswers[question.key] = e.target.value;
    return {
        answers: newAnswers,
    }
});

然后，一旦您的验证被触发，您就可以使用键遍历答案并验证每个答案:)

这可能是一个更冗长的解释，但我希望它能给你一个更好的方向……React 就是找到最好的方法来轻松地做事 :D