Question

我想知道如何解决以下错误：

onChange={this.handleName}

我知道我应该在构造函数中进行绑定，而且我也无法在onChange内部进行绑定，任何想法？

＆＃13;

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

＆＃13;

Answer 1

您需要将handleName绑定到this。

而不是：

onChange={this.handleName}

写得像：

onChange={this.handleName.bind(this)}。

这是因为您将函数引用传递给onChange所以当它执行时它将超出您当前的范围，因为setState不存在。< / p>

Answer 2

请在构造函数中添加绑定行。

构造函数（props：Props）{ .... this.handleName = this.handleName .bind（this）; }

Answer 3

以箭头函数的形式制作handleName，其中this将被引用到组件实例。

handleName = (e) => { this.setState({ name: e.target.value }); }

Answer 4

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

要纠正此错误，您可以将函数的绑定放在构造函数中。

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

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

或者您可以使用箭头语法来定义函数

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

Answer 5

您应该在构造函数方法中bind handleName函数。

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

更改this.setState上的React错误不是函数

5 个答案: