React TypeScript中onChange调用setState报undefined但打印值正常如何解决

问题原因 #

你的报错根源是类方法的this指向丢失，和event参数完全无关：

• 你当前定义的onFirstNameChange是普通类方法，当它作为DOM事件回调被调用时，内部的this不会默认指向React组件实例，值为undefined
• console.log(event.target.value)能正常运行是因为这行代码没有用到this，只要event参数正常传递就可以执行
• 取消注释后调用this.setState时，this是undefined，自然会抛出"无法读取undefined的属性"的错误

解决方案 #

可选以下任意一种方案修复：

1. 使用箭头函数定义类方法（最常用）
   箭头函数会继承定义时外层作用域的this，永远指向组件实例：

onFirstNameChange = (event: any) => {
    console.log(event.target.value)
    this.setState({
        firstname: event.target.value
    })
}

2. 在构造函数中手动绑定this
   在类的构造函数中提前把方法的this绑定到组件实例：

constructor(props: any) {
    super(props);
    // 绑定this
    this.onFirstNameChange = this.onFirstNameChange.bind(this);
}

onFirstNameChange(event: any){
    console.log(event.target.value)
    this.setState({
        firstname: event.target.value
    })
}

3. 事件绑定时用箭头函数包裹
   在JSX绑定onChange事件时用箭头函数包裹回调，确保内部this指向正确：

<input onChange={(e) => this.onFirstNameChange(e)} />

注意：该方案每次组件渲染都会生成新的匿名函数，会造成额外的性能开销，不推荐在复杂列表/高频渲染的场景使用。

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