Question

在我的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 });
...
...
...

Answer 1

这种差异在于约束力。如果您看一下如何设置按钮和输入的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

这在一个函数中为null，而不是在同一个类的另一个函数中

1 个答案: