在我的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>
正如你可以看到我有handleEmailChange
,handlePasswordChange
,和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 });
...
...
...
這是因爲返回handleLoginClick –