我正在使用 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 数据返回到函数中。
最佳答案
网格有一个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 的相同逻辑可用于我上面的代码片段。
关于javascript - 双击 Kendo Grid 行的 React Component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50296884/