本文详解如何在 react 的父子组件通信中，借助回调函数与状态提升，实现在点击“添加题目”按钮前校验所有已存在子表单（questionform）的必填字段是否完整，并仅在全部有效时动态添加新题目。
要在 <CreateQuiz/>（父组件）中实现“点击‘Add Question’前校验所有已有 <QuestionForm/> 表单是否填写完整”，核心思路是：将子组件的表单状态“上提”至父组件统一管理，并通过回调函数让子组件实时同步自身校验状态。直接在 addQuestion 中遍历 questionsArray 并检查 undefined 是不可行的——因为当前 questionsArray 仅存储 ID 和临时标记（如 { value: true, id: nanoid() }），并未包含子组件内部的实际输入值。
✅ 正确做法如下：
1. 父组件管理完整表单状态
将每个题目的所有字段（question、answerOne～Four、correctAnswer）作为对象存入 questionsArray，初始值可设为空字符串或 null：
const [questionsArray, setQuestionsArray] = useState([
{
id: nanoid(),
question: '',
answerOne: '',
answerTwo: '',
answerThree: '',
answerFour: '',
correctAnswer: '',
}
]);2. 向子组件传递更新回调（关键！）
为每个 <QuestionForm/> 提供一个 onFieldChange 回调，使其能通知父组件某字段已更新：
{questionsArray.map((question) => (
<QuestionForm
key={question.id}
id={question.id}
data={question}
onFieldChange={(field, value) =>
setQuestionsArray(prev =>
prev.map(q =>
q.id === question.id ? { ...q, [field]: value } : q
)
)
}
/>
))}3. 在 addQuestion 中执行完整性校验
校验逻辑：确保所有已有题目的 question 和 correctAnswer 非空（其他答案项可选，按需调整）：
const addQuestion = () => {
// 校验：所有已有题目必须至少填了题干和正确答案
const hasIncomplete = questionsArray.some(q =>
!q.question.trim() || !q.correctAnswer.trim()
);
if (hasIncomplete) {
alert('请先完成所有已有题目的题干和正确答案！');
return;
}
// 校验通过，添加新空题目
setQuestionsArray(prev => [
...prev,
{
id: nanoid(),
question: '',
answerOne: '',
answerTwo: '',
answerThree: '',
answerFour: '',
correctAnswer: '',
}
]);
};4. 子组件（QuestionForm）示例实现要点
function QuestionForm({ id, data, onFieldChange }) {
return (
<div className="question-form">
<input
placeholder="题目内容"
value={data.question}
onChange={(e) => onFieldChange('question', e.target.value)}
/>
{/* 其他 input 同理... */}
<select
value={data.correctAnswer}
onChange={(e) => onFieldChange('correctAnswer', e.target.value)}
>
<option value="">请选择正确答案</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
);
}⚠️ 注意事项：
- 避免在子组件内维护独立 state（如 useState），否则父组件无法感知其真实值，导致校验失效；
- 若需实时反馈（如高亮未填字段），可在父组件中基于 questionsArray 计算 isInvalid 状态并透传给子组件；
- 对于大型表单，可考虑使用 useReducer 或 Zustand 等状态管理方案提升可维护性。
通过该设计，你既保持了组件职责清晰（子组件专注 UI 交互，父组件专注状态与业务逻辑），又实现了点击前强校验，真正做到了“优雅、可控、可扩展”。
