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

Question

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

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

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

这是代码：

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

实际页面在哪里：

https://mbv401920150.github.io/Math

欢迎任何评论！

Answer 1

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

处理这种情况，甚至清理代码的最简单方法是创建每个问题的数组，并将其分别存储在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

Answer 2

一个好的做法是不访问子组件，而是从它们请求数据。拥有单一信任来源也很好，这意味着您的每条数据都应该在一个确切的位置。

我你的情况：

1. 在父组件中保留有关选中选项的数据(包含提交按钮并将检查答案的组件(
2. 将回调传递给子组件，如果某些内容发生了更改，它们将通过该回调通知父组件

请注意，子组件不应包含有关所选内容的状态，您必须从父组件传递此数据。