javascript - 双击 Kendo Grid 行的 React Component

Question

我正在使用 React Grid 组件，我正在寻找一种在双击一行时触发函数的方法。

我找到了一个 rowClick函数，我现在可以使用它来选择一行或处理一个 onClick 事件:<Grid rowClick={e => yourFunction(e)}> .但是没有处理双击事件的函数。

这是我的方法，我通过了一个onDoubleClick()作为我的组件的 Prop ，并将其与 doubleClick 的监听器绑定(bind)在 componentDidMount对于每一行:

componentDidMount() {
    let { onDoubleClick } = this.props;
      if (onDoubleClick) {
        const rows = document
          .getElementsByClassName('k-widget k-grid')[0]
          .getElementsByClassName('k-grid-table')[0]
          .getElementsByTagName('tbody')[0]
          .getElementsByTagName('tr');
        for (let i = 0; i < rows.length; i++) {
          rows[i].addEventListener('dblclick', () => onDoubleClick());
        }
      }
  }

目前这可行，但我无法将单击的行数据传递给我的函数。是否有任何技巧可以使用元素检索行的数据？例如:onDoubleClick(kendo.data.DataSource(rows[i])) => 将 json 数据返回到函数中。

Answer 1

网格有一个rowRender属性，可以用作 RenderProp用于完全修改行，包括使用 native React 方法将它们附加到 rowClick。

rowRender(trElement, dataItem) {
    const trProps = {
        ...trElement.props,
        onDoubleClick: () => {
            //place your logic here
        }            
    };
    return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
}

您可能会在 InCell editing demo 中找到有关如何为 GridRow 附加鼠标鼠标按下、模糊和聚焦的实例。 onDoubleClick 的相同逻辑可用于我上面的代码片段。