Question

我正在尝试开发一项功能，使用上下箭头选择表格的上一行或下一行，我使用捕鼠器将热键绑定到元素，这是我所拥有的示例：

在网格上

render() {
   <Grid rows={...} columns={...} rootComponent={CustomRoot}>
      ....
    </Grid>
}

CustomRoot类：

export default class CustomRoot extends PureComponent {

    constructor(props) {
        super(props)
        this.rootRef = React.createRef()
    }

    componentDidMount() {
        const mousetrap = new Mousetrap(this.rootRef.current);
        mousetrap.bind('up', this.handleUpKey);
        mousetrap.bind('down', this.handleDownKey);
    }

    handleUpKey = () => {
        console.log("UP")
    }

    handleDownKey = () => {
        console.log("DOWN")
    }

    render() {
        const { children, className, ...restProps } = this.props
        return (
            <div
                className={classNames('d-flex flex-column', className)}
                {...restProps}
                style={{ height: '100%' }}
                tabIndex="0"
                ref={this.rootRef}
            >
                {children}
            </div>
        )
    }
}

我能够将事件侦听器附加到网格的根部，但是我不知道如何使这些事件侦听器触发操作以更改所选状态，我注意到可以使用以下方法创建动作和获取器插件，但尚不清楚如何通过像rootComponent这样的道具传递的组件来实现此目的

我正在使用受控状态进行选择，但是在使用IntegratedSorting和IntegratedFiltering插件后，知道接下来的行ID也不是一件容易的事

devextreme-active反应网格的按键事件处理

0 个答案: