React开发问题：EditableQuestion组件内表单修改时OnChange事件未触发

根本原因是父子组件传递props的命名不匹配：

• 父组件QuizEdit调用子组件时，传递的事件回调属性名为onChange
• 但子组件EditableQuestion的入参解构时，接收的回调属性名为handleChange
  这就导致子组件内部拿到的handleChange实际为undefined，绑定到表单的onChange事件自然不会生效，不会触发任何日志输出。
  另外还有一个隐藏问题：四个选项的文本输入框没有绑定onChange事件，后续修改选项内容时也无法触发回调。

第一步 对齐props命名 #

任选以下一种方案修改即可：

方案1：修改父组件传参属性名 #

将父组件中调用EditableQuestion的属性从onChange={this.handleChange}改为handleChange={this.handleChange}，修改后代码：

<EditableQuestion handleChange={this.handleChange} key={questionId} questionId={questionId} text={text} ans1={ans1} ans2={ans2} ans3={ans3} ans4={ans4} correctAnswer={correctAnswer} points={points}{...otherDraftProps}/>

方案2：修改子组件接收的属性名 #

将子组件的入参解构的handleChange改为onChange，同时把内部所有表单绑定的onChange={handleChange}改为onChange={onChange}。

第二步 补全缺失的事件绑定与属性 #

给四个选项的文本输入框绑定onChange事件，同时为所有表单元素添加可识别的name属性，方便后续在handleChange中区分修改的字段：

// 仅展示修改后的核心代码
<div className='answer'>
  <input type='radio' onChange={handleChange} name="correctAnswer" value="1" defaultChecked={1 === correctAnswer}/>
  <input type='text' name="ans1" onChange={handleChange} defaultValue={ans1}/>
</div>
<div className='answer'>
  <input type='radio' onChange={handleChange} name="correctAnswer" value="2" defaultChecked={2 === correctAnswer}/>
  <input type='text' name="ans2" onChange={handleChange} defaultValue={ans2}/>
</div>
<div className='answer'>
  <input type='radio' onChange={handleChange} name="correctAnswer" value="3" defaultChecked={3 === correctAnswer}/>
  <input type='text' name="ans3" onChange={handleChange} defaultValue={ans3}/>
</div>
<div className='answer'>
  <input type='radio' onChange={handleChange} name="correctAnswer" value="4" defaultChecked={4 === correctAnswer}/>
  <input type='text' name="ans4" onChange={handleChange} defaultValue={ans4}/>
</div>
// 分数输入框补全name属性
<div className='points'>
  <input type='text' name="points" onChange={handleChange} defaultValue={points}/>
  <span>points</span>
</div>

完成以上修改后，修改表单元素即可正常触发handleChange打印日志。后续要同步更新state的话，只需要在handleChange中结合questionId和当前触发元素的name、value，更新对应题目的对应字段即可。

内容的提问来源于stack exchange，提问作者MasterWilliams