如何从ReactJS中的另一个方法运行ajax调用?

时间:2017-07-16 21:51:54

标签: javascript ajax reactjs

当我在其中一个子组件中选择一个锚标记时,它会使用pageChange事件调用onClick。这有效。我想调用另一种方法来触发ajax调用来获取页面数据:

getPageData(slug){
    axios.get('http://ajax-call.com/'+slug)
    .then((response) => {
        console.log( response );
    })
    .catch((error) => {
        console.log(error);
    });
}

pageChange(e){
    var slug = e.target.getAttribute('data-link');

    this.getPageData(slug);


    e.preventDefault();
}

我收到错误Cannot read property 'getPageData' of null我想我需要将方法绑定到this,但我可能会走错路。

1 个答案:

答案 0 :(得分:1)

你可能只需要像你说的那样绑定函数。有一个很好的快捷方式:

pageChange = (e) => {
  var slug = e.target.getAttribute('data-link');

  this.getPageData(slug);

  e.preventDefault();
}

这与在componentDidMount中绑定它大致相似:

componentDidMount() {
  this.pageChange = this.pageChange.bind(this);
}

如果你倾向于阅读更多关于它的更多info about events on the React site