React开发井字棋时子组件无法调用父组件方法问题排查

问题根因定位 #

• 错误1：Game组件传递props取值错误
  在Game组件的render方法中，给Choosechar绑定charSelect属性时，误写为charSelect={this.props.charSelect}。但charSelect是Game组件内部自定义的实例方法，并非从Game的父级传入的props，该值实际为undefined，Choosechar内部调用时就会触发「目标函数不存在」的报错。
  修正方式：直接绑定Game自身的实例方法，即charSelect={this.charSelect}。
• 错误2：Choosechar事件回调传参不符合父组件预期
  Choosechar组件的onRadioSubmmit方法中，向父组件传递的是空的、未存储任何值的组件state。但Game内部的charSelect方法，是依赖传入参数的currentTarget.innerHTML属性，来读取用户选择的X/O字符值。即便修正了第一个传参错误，当前传递的空对象不存在currentTarget属性，依然会触发空引用报错。
  修正方式：按钮绑定点击事件时，将原生事件对象一并传入，再把收到的事件对象直接转发给父组件，不要传递空state。

关键修正代码片段 #

// Game组件render中Choosechar的绑定修正
<Choosechar
  menuVisible={this.state.menuVisible}
  charSelect={this.charSelect}
/>

// Choosechar组件按钮事件绑定修正
<button 
  id="x-char" 
  className="xo-button x" 
  onClick={(e) => this.onRadioSubmmit(e)}
>
  X
</button>                    
<button 
  id="o-char" 
  className="xo-button o" 
  onClick={(e) => this.onRadioSubmmit(e)}
>
  O
</button>

// Choosechar组件提交方法修正
onRadioSubmmit(e) {
  this.props.charSelect(e)
}

补充：Choosechar组件中初始化的空state无实际业务作用，可直接移除减少无效代码。

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