Javascript 无法读取属性'；州'；未定义的

我正试图得到这些价值观​​从按钮中的输入单击，但单击时出现错误：无法读取未定义的属性“状态”

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> 
        )
    }

这是我的代码，在身份验证函数This.state中返回：无法读取未定义的属性“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> 
        )
    }

构造函数（道具）{
超级（道具）；
此.state={
电子邮件：“”，
通行证：“”
}
}
手变（活动）{
这是我的国家({
[event.target.name]：event.target.value
})
}
身份验证（）{
console.log（this.state）；
}
render（）{
返回(
登录
诺姆：
this.handleChange（event）}/>
森哈：
this.handleChange（event）}/>
阿塞萨尔
)
}

您应该绑定身份验证功能和handleChange功能。要做到这一点，您可以在构造函数中使用bind方法，也可以使用ES6箭头操作符，如下所示-

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

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

---

您应该绑定身份验证函数和handleChange函数。要做到这一点，您可以在构造函数中使用bind方法，也可以使用ES6箭头操作符，如下所示-

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

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

---

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

---

这里有一个链接指向React

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

---

这里有一个链接，可以在React

中使用

onClick={this.authentication.bind（this）}

或：在构造函数中绑定一次，而不是在每次渲染时绑定一次。如果变量可能未定义，请在使用前使用if（typeof variable==“Number”|“String”|“Object”）验证变量。使用

onClick={this.authentication.bind（this）}

Or：在构造函数中绑定一次，而不是在每次渲染时绑定。如果变量可能未定义，请在使用前使用if（typeof variable==“Number”|“String”|“Object”）验证变量。