Question

我在组件中有一个功能，同时我使用DataTables按钮来触发显示模态。这是片段：

constructor(props) {
      super(props);
      this.state = {
          error: null,
          isLoaded: false,
          table_type: 'default',
          date_time : null,
          data: [],
          header : null
      };
      this.toogleBtnTbl = this.props.toogleBtnTbl.bind(this);
      this.showModal = this.props.showModal.bind(this);
    }

我无法在Datatables按钮内调用函数this.showModal，因为this在这种情况下引用了Datatables。我的问题是如何在this.showModal属性中调用action？

buttons: [
                {
                    text: 'View in Graph',
                    action: function ( e, dt, node, config ) {  
                        this.showModal();//not working undefined
                    }
                },

Answer 1

您必须更改为箭头功能

action: ( e, dt, node, config ) => {  
   this.showModal();
}

Answer 2

从未使用过DataTables，但我认为你只需要一个匿名的立即执行的函数来捕获＆＃34;这个＆＃34;并将其存储在封闭中：

buttons: [
            {
                text: 'View in Graph',
                action: (function(component){
                    return function ( e, dt, node, config ) {  
                        component.showModal();
                    };
                })(this);
            },

动作被设置为一个立即被称为存储＆＃39;这个＆＃39;在它自己的小词汇环境中，返回的函数总是可以访问它。如果有效，请告诉我。

如何在同一组件内的回调中调用ReactJS中的函数？

2 个答案: