Question

我有一个具有onChange的输入。它位于登录名上，具有密码输入和提交按钮。非常简单，并且效果很好（我在控制台中对其进行了跟踪）。代码如下：

...

constructor(props) {
    super(props)
    this.state = { 
      loginMode: true, 
      error: this.props.loginU.errorEmailMsg == null 
     }
    this.handleEmailError = this.handleEmailError.bind(this);
  }

...

<Field
    component={Input}
    type="email"
    name="email"
    required={true}
    onChange={this.handleEmailError}
    errorState={ this.state.error == true && this.props.loginU.errorEmailMsg != null || this.props.loginU.errorMsg != null ? true : false }
        />

问题在我提交时发生，给了我TypeError: this.setState is not a function的错误。该错误针对的是一个名为onSubmit的函数，该函数不需要绑定，并且我认为对于该问题并不重要，因为当我删除“ handleEmailError”时，该函数都可以使用。也许这是生命周期问题或类似的问题，我真的不明白。当我犯错时可以告诉我吗？这是我称为onSubmit的方式：

    if (showLogin) {  

      form = <form onSubmit={handleSubmit(v => this.onSubmit(v))}>
          <Field
              component={Input}
              type="email"
              name="email"
              required={true}
              onChange={this.handleEmailError}
              errorState={ this.state.error == true && this.props.loginU.errorEmailMsg != null || this.props.loginU.errorMsg != null ? true : false }
            />

...

Answer 1

问题是因为handleSubmit返回一个函数，您没有显式设置返回函数的上下文，因此它在DOM组件的上下文中被调用，即form

举个例子，以下应该可以工作

 onSubmit={e => handleSubmit(v => this.onSubmit(v))(e)}

那是因为我们使用箭头函数来切换处理程序上下文，而内部箭头函数继承了该上下文。

~~如果将handleSubmit声明为类字段，则会自动绑定到组件的上下文，并且代码应按原样工作~~

~~handleSubmit = func => { ... }~~

鉴于您现在已经确认handleSubmit是作为道具传入的，那么这里最简单的方法是在分配处理程序之前将其绑定，例如

constructor(props) {
  super(props);
  this.submitHandler = this.props.handleSubmit.bind(this);
}
...
<form onSubmit={this.submitHandler(v => this.onSubmit(v))}>

SetState不是函数，并且已进行“绑定”

1 个答案: