在我的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 });
...
...
...
答案 0 :(得分:3)
这种差异在于约束力。如果您看一下如何设置按钮和输入的onChange,在一个中使用INSERT OVERWRITE LOCAL DIRECTORY '<Local directory>'
STORED AS AVRO SELECT * FROM some_hive_table;
的箭头功能,另一个使用handleLoginClick
。
箭头功能自动将{this.handleEmailChange}
绑定到该功能。有两种方法可以解决这个问题。之一:
this
或
onChange = {this.handleEmailChange.bind(this)}
这将在函数和您设置状态的onChange = {(event) => handleEmailChange(event)}
之间创建绑定。
有关使用箭头函数或.bind()
绑定到上下文的更多信息,请查看:Difference of .bind() to arrow function () => usage in React