TypeError：无法读取未定义的属性（读取“setState”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'setState')TypeError：无法读取未定义的属性（读取“setState”）
【发布时间】：2021-12-09 17:06:27
【问题描述】：

我在尝试什么？

试图在状态中设置输入类型文本的值

到目前为止我搜索了什么？

React - uncaught TypeError: Cannot read property 'setState' of undefined

但这并不能回答我的问题

错误详情

TypeError: Cannot read properties of undefined (reading 'setState')

在setEmailVal函数中设置email的值时出现此错误

组件

import React from 'react';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {email: ""};
    }

    setEmailVal(val) {
        this.setState({email: val.currentTarget.value});
    }

    render() {
        return (
            <input type="text" onChange={this.setEmailVal} value={this.state.email} />
        );
    }    
}

export default Login;

【问题讨论】：

你可以试试把this.setState({email: val.currentTarget.value});改成this.setState({email: val.target.value});
这能回答你的问题吗？ React - uncaught TypeError: Cannot read property 'setState' of undefined

标签： reactjs

【解决方案1】：

如果你以下列方式声明你的函数

    setEmailVal = val => {
        this.setState({email: val.currentTarget.value});
    }

效果很好。

如果您希望以其他方式（旧的，如果我没记错的话）进行，那么您需要将函数绑定到子组件的类，即类中的 onChange 处理程序以“查看”它：

    constructor(props) {
        super(props);
        this.state = {email: ""};
        this.setEmailVal = this.setEmailVal.bind(this);
    }

最后，您可以在返回组件本身内部进行直接绑定

        return (
            <input type="text" onChange={this.setEmailVal.bind(this)} value={this.state.email} />
        );

【讨论】：

【解决方案2】：

您可以通过将setEmailVal 更改为箭头函数来解决此问题。
应该是这样的：

setEmailVal = e => {
   this.setState({email: e.currentTarget.value});
}

查看this 了解有关该主题的更多信息。

【讨论】：