更改时出现反应错误。setState不是函数[重复]

Question

我想知道如何修复以下错误：

onChange={this.handleName}

我知道我应该在构造函数内部进行绑定，也不能在onChange内部进行绑定，有什么想法吗？

class Register extends React.Component {
  constructor(props: Props) {
    super(props)
    this.state = {
      name: '',
      surname: '',
      email: '',
    }
  }
  handleName(e) {
    this.setState({ name: e.target.value })
  }
  render() {
    return (
      <Dialog className={classes.root} open={isOpen}>
      <TextField label="NAME" onChange={this.handleName} fullWidth />
      </Dialog>
    )
  }
}

Answer 1

以箭头函数的形式生成handleName，从而此将被引用到组件实例。

HandleName=（e）=

Answer 2

您需要将handleName绑定到this。

而不是：

onChange={this.handleName}

这样写：

onChange={this.handleName.bind}。

这是因为您正在将函数引用传递给onChange，因此当它执行时，它将超出您当前的范围，因为setState将不存在。

Answer 3

由于函数handleName未绑定到类，因此当前handleName中的this的范围是函数本身，而不是类。因此，该范围内没有setState函数。

要更正此错误，可以将函数的绑定放入构造函数中。

constructor(props: Props) {
    super(props)
    this.state = {
      name: '',
      surname: '',
      email: '',
    }

    this.handleName = this.handleName.bind(this,e);
  }

也可以使用箭头语法定义函数

handleName = (e)=> {
...
}