類型錯誤：無法讀取未定義的屬性（讀取“setState”）

Question

我在嘗試什么？

嘗試在狀態中設置輸入類型文本的值

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

反應 - 未捕獲的類型錯誤：無法讀取未定義的屬性“setState”

但這並不能回答我的問題

錯誤詳情

類型錯誤：無法讀取未定義的屬性（讀取“setState”）

在函數 setEmailVal 中設置電子郵件的值時會出現此錯誤

成分

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;

Answer 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} />
        );

Answer 2

您可以通過將setEmailVal更改為箭頭函數來解決此問題。
應該是這樣的：

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

看看這個關於這一主題的更多信息。