1

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

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

这是我的方法，我将一个onDoubleClick()函数作为道具传递给我的组件，并将它与每一行的监听器doubleClick绑定：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 数据返回给函数。

4

1 回答 1

2

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

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

您可以在InCell 编辑演示中找到如何为 GridRow 附加鼠标 mousedown、模糊和焦点的实时示例。 onDoubleClick的相同逻辑可以用于我上面的代码片段。

于 2018-05-16T15:07:30.610 回答