这在一个函数中为空,而不在另一个类中

在我的React/JS应用程序中。这是Component类我的一部分:这在一个函数中为空,而不在另一个类中

<p> 

<input

onChange={ this.handleEmailChange } value={ this.props.email } type='email'

className={ this.state.error ? 'form-control loginCredentialError shakeElement' : 'form-control' }

name='email'

placeholder='Email' required='True'

/>

<input

onChange={ this.handlePasswordChange } value={ this.props.password } type='password'

className={ this.state.error ? 'form-control loginCredentialError shakeElement' : 'form-control' } name='password'

placeholder='Password' required='True'

/>

</p>

<p>

<Button

onClick={ (event) => this.handleLoginClick(event) }

className='btn btn-round-lg btn-round btn-primary btn-block center-block'

>Sign In</Button>

</p>

正如你可以看到我有handleEmailChangehandlePasswordChange,和handleLoginClick。 这三个功能是相同Component类作为render功能

在这个函数中,this被评价为null,这使得this.setState失败。

handleEmailChange(event) { 

const value = event.target.value;

console.log(value);

this.setState({ email: value });

}

然而,在此功能的this是微细且具有值。 setState效果很好。任何人都可以让我知道为什么这些看似相似的功能有所不同?

handleLoginClick(event) { 

event.preventDefault();

const payload = {

'email': this.state.email,

'password': this.state.password,

};

this.setState({ communicating: true, error: false, errorServer: false });

...

...

...

回答:

这里的区别在于绑定。如果你看看你如何设置按钮和输入的onChange,在一个你使用箭头功能handleLoginClick和其他你使用{this.handleEmailChange}

箭头功能自动绑定this给该函数。有两种方法可以解决这个问题。或者:

onChange = {this.handleEmailChange.bind(this)} 

onChange = {(event) => handleEmailChange(event)} 

这将创建功能,您正在设置的状态this之间的绑定。

退房:Difference of .bind() to arrow function() => usage in React更多信息使用箭头功能或.bind()结合上下文

以上是 这在一个函数中为空,而不在另一个类中 的全部内容, 来源链接: utcz.com/qa/267271.html

回到顶部