react 中this指向问题

最新推荐文章于 2023-10-28 22:53:13 发布

原创最新推荐文章于 2023-10-28 22:53:13 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 整理专栏收录该内容

11 篇文章

订阅专栏

本文探讨了React中this指向问题，解释了为何在事件处理函数中this可能无法正确引用组件实例。提供了三种解决方法：使用bind绑定this，构造函数内绑定，以及使用箭头函数。同时，讨论了React事件传参的正确方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行一下代码会报错，就是因为this指向的问题

import React, {Component} from 'react'
import { Button } from 'antd';

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
  }
  handleSetdata() {
    // 这里的this是属于这个方法，不属于外部，所以无法调用到setState方法
    this.setState({
      msg: 'new data'
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        <Button type="primary" onClick={this.handleSetdata}>Primary</Button>
      </div>
    )
  }
}

绑定事件处理函数this的几种方法：

1、在事件调用后面加上bind(this)

<Button type="primary" onClick={this.handleSetdata.bind(this)}>Primary</Button>

2、在构造函数中改变

constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
    this.handleSetdata = this.handleSetdata.bind(this)
}

3、调用的方法，用es6箭头函数的形式声明，就不会存在this指向问题

handleSetdata = () => {
    this.setState({
      msg: 'new data'
    })
  }

react 事件调用方法传参问题

以下代码会报错：

handleSetdata不能直接使用传递参数

import React, {Component} from 'react'
import { Button } from 'antd';

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
  }

  handleSetdata = (val) => {
    this.setState({
      msg: val
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        <Button type="primary" onClick={this.handleSetdata('nea msg')}>Primary</Button>
      </div>
    )
  }
}

正确写法

<Button type="primary" onClick={this.handleSetdata.bind(this, 'nea msg')}>Primary</Button>