Question

我正在使用反应谷歌图表，并尝试使用chartEvents方法挂钩the selection event。

这有效：

const ChartClass = React.createClass({
  getInitialState () {
    return {
      showModal: false
    }
  },
  handleShowModal () {
    this.setState((prev, props) => {
       return {
         showModal: true
       }
    })
  },
  chartEvents: [
    {
      eventName: 'select',
      callback: function (Chart) {
         this.handleShowModal()
      }
    }
  ],
  render () {
    return (
      <Chart
        chartEvents={this.chartEvents}
        data={this.props.data}
      />
    )
  }
})

然而，在该回调中，我想调用其他一些方法

this.handleOpenModal(ChartObj) // TypeError: this.handleOpenModal is not a function
this.sthElse()

因为在此回调中this被设置为事件本身

console.log(this) //object {eventName: "select", callback: function}

有没有办法引用父类，所以我可以使用它的方法？我不认为我可以简单地将该函数放在类之外，因为它需要使用this.setState

Answer 1

React.createClass组件确实自动绑定了所有方法，因此除了将回调声明为方法之外，您无需做任何事情 - 或者直接使用handleShowModal：

const ChartClass = React.createClass({
  getInitialState() {
    return {
      showModal: false
    }
  },
  handleShowModal(Chart) {
    this.setState((prev, props) => {
      return {
        showModal: true
      }
    })
  },
  render() {
    return (
      <Chart
        chartEvents={[
          {
            eventName: 'select',
            callback: this.handleShowModal
          }
        ]}
        data={this.props.data}
      />
    )
  }
})

当然，如果你正在使用ES6，你可能应该切换到class语法。

A（可能被认为是hacky）替代方案是使用chartEvents方法中的bound callback创建getInitialState：

const ChartClass = React.createClass({
  getInitialState() {
    this.chartEvents = [
      {
        eventName: 'select',
        callback: (Chart) => { // use arrow functions
          this.handleShowModal()
        } // or .bind(this) or whatever here
      }
    ];
    return {
      showModal: false
    }
  },
  handleShowModal () {
    this.setState((prev, props) => {
       return {
         showModal: true
       }
    })
  },
  render () {
    return (
      <Chart
        chartEvents={this.chartEvents}
        data={this.props.data}
      />
    )
  }
})

Answer 2

您需要在回调中绑定“this”

这可以通过

完成

使用箭头功能

   chartEvents: [
     {
       eventName: 'select',
       callback:  Chart => {
         console.log('component', Chart.chart.getSelection()) //yep, shows the selection
       }
     }
   ],

绑定

   chartEvents: [
     {
       eventName: 'select',
       callback: function (Chart) {
         console.log('component', Chart.chart.getSelection()) //yep, shows the selection
       }.bind(this)
     }
   ],

当`this`似乎被重置时，引用父类的方法

2 个答案: