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

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)}

那是因为我们使用箭头函数来切换handler上下文，内部箭头函数继承了这个上下文。

如果您将handleSubmit 声明为类字段，您会自动绑定到组件的上下文，并且您的代码应该按原样运行

handleSubmit = func => {
  ...
}

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

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