如何在RevoGrid JSX自定义内容渲染场景下添加事件监听器

Vue TSX的事件绑定规则和React存在差异，且revo-grid内部对单元格的原生事件有默认拦截逻辑，二者共同导致React风格的事件写法无法直接生效。

• 优先使用Vue TSX标准事件语法
  Vue 3官方JSX/TSX插件支持和React一致的小驼峰事件写法，原生事件直接通过onClick/onKeydown绑定即可，键盘事件需要给元素添加tabindex属性使其可聚焦，示例如下：

  import { defineComponent } from 'vue'
  
  const CustomCellRenderer = defineComponent({
    setup() {
      const handleCellClick = (e: MouseEvent) => {
        console.log('单元格被点击', e.target)
      }
  
      const handleCellKeydown = (e: KeyboardEvent) => {
        console.log('触发键盘事件', e.key)
      }
  
      return () => (
        <div 
          class="custom-cell"
          tabindex={0}
          onClick={handleCellClick}
          onKeydown={handleCellKeydown}
        >
          自定义单元格内容
        </div>
      )
    }
  })
  

• 手动绑定原生事件（适配revo-grid拦截场景）
  如果标准写法被revo-grid内置事件拦截，可通过ref获取DOM元素后手动绑定、解绑事件：

  import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
  
  const CustomCellRenderer = defineComponent({
    setup() {
      const cellElRef = ref<HTMLDivElement>()
  
      const handleCellClick = (e: MouseEvent) => {
        console.log('点击事件触发')
      }
  
      const handleCellKeydown = (e: KeyboardEvent) => {
        console.log('键盘事件触发')
      }
  
      onMounted(() => {
        if (!cellElRef.value) return
        cellElRef.value.addEventListener('click', handleCellClick)
        cellElRef.value.addEventListener('keydown', handleCellKeydown)
      })
  
      onUnmounted(() => {
        if (!cellElRef.value) return
        cellElRef.value.removeEventListener('click', handleCellClick)
        cellElRef.value.removeEventListener('keydown', handleCellKeydown)
      })
  
      return () => (
        <div ref={cellElRef} tabindex={0}>
          自定义单元格内容
        </div>
      )
    }
  })
  

• 调整revo-grid配置避免拦截
  可以给自定义单元格根元素添加data-no-focus属性，或关闭revo-grid的cellSelection内置选择配置，避免框架默认逻辑拦截自定义事件。

内容的提问来源于stack exchange，提问作者Pavel Terentev