无法读取未定义的属性“状态”答案

【问题标题】：Cannot read property 'state' of undefined无法读取未定义的属性“状态”
【发布时间】：2019-06-08 10:48:24
【问题描述】：

我试图从按钮单击中的输入中获取值，但是当我单击时出现错误：无法读取未定义的属性'状态'。

这是我的代码，在身份验证函数 this.state 中返回：无法读取未定义的属性“状态”。

constructor(props) {
  super(props);
  this.state = {
    email: '',
    pass: ''
  }
}

handleChange (event) {
  this.setState({
    [event.target.name]: event.target.value
  })
}

authentication() {
 console.log(this.state);
}

render() {
        return (
            <Fragment>
                <LoginStyles />
                <main>
                    <section>
                        <h2 className="title">Login</h2>

                        <div className="form__login">
                            <label>Nome:</label>
                            <input type="text" name="email" onChange={event => this.handleChange(event)} />

                            <label>Senha:</label>
                            <input type="password" name="pass" onChange={event => this.handleChange(event)} />

                            <button className="btn-default" onClick={this.authentication}>Acessar</button>
                        </div>
                    </section>
                </main>
            </Fragment> 
        )
    }

【问题讨论】：

使用onClick={this.authentication.bind(this)}
stackoverflow.com/questions/29577977/…
或者：在构造函数中绑定一次，而不是在每次渲染时绑定一次。
使用 if ( typeof variable == "Number" | "String" | "Object" ) 在使用前验证变量是否有可能未定义。

标签： javascript reactjs

【解决方案1】：

你应该绑定你的认证函数和handleChange函数。为此，您可以在构造函数中使用绑定方法或使用 ES6 箭头运算符，如下所示-

handleChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value
  })
}

authentication = () => {
 console.log(this.state);
}

【讨论】：

【解决方案2】：

正如有人已经提到的，您必须像他一样在构造函数或onClick中绑定方法

这是 React 中 Handling Events 的链接

【讨论】：