DevExtreme按钮事件无法访问组件字段问题求助

这个问题本质是函数上下文丢失导致的——当你直接把customFunc赋值给按钮的onClick时，函数执行时的this已经不是你的组件实例了，而是指向了触发事件的DOM元素或者DevExtreme的事件上下文，所以自然拿不到this.myArr这类组件属性。

给你三种简单有效的解决办法，按需选择：

方法一：模板中使用箭头函数绑定上下文 #

直接在模板里用箭头函数包裹你的方法调用，这样就能强制保留组件的this上下文：

<dxi-button name="edit" [onClick]="(e) => customFunc(e)"></dxi-button>

这样在customFunc里，this就会指向你的MyClass组件实例，就能正常访问myArr和其他组件字段了。

方法二：在构造函数中提前绑定上下文 #

在组件的构造函数里，用bind方法把customFunc的this固定为组件实例：

constructor(// 你的依赖注入内容) {
  // 构造函数原有代码
  this.customFunc = this.customFunc.bind(this);
}

之后模板里的绑定不用改，customFunc执行时的this始终指向组件。

方法三：把方法定义成箭头函数形式 #

直接在组件类里将customFunc定义为箭头函数，箭头函数会自动继承外层的this（也就是组件实例）：

customFunc = (e) => {
  this.myArr = this.doSth(); // 现在可以正常访问组件字段了
}

这种写法最简洁，不需要额外的绑定操作。

顺便说下如何获取事件中的数据 #

要拿到点击行的id等数据，直接通过事件参数e就行：

customFunc = (e) => {
  // 获取当前行的完整数据对象
  const rowData = e.row.data;
  // 假设你的数据里有id字段，取出它
  const targetId = rowData.id;
  
  // 把id加入你的集合
  this.myArr.push(targetId);
  // 或者传入你的doSth方法处理
  this.myArr = this.doSth(targetId);
}

选一种你觉得顺手的方式就行，三种方法都能解决你的问题~

内容的提问来源于stack exchange，提问作者The Trainer