Обработка событий нажатия клавиш для devextreme-реактивной реактивной сетки - PullRequest
Новая
       13

Обработка событий нажатия клавиш для devextreme-реактивной реактивной сетки

0 голосов
/ 11 апреля 2019

Я пытаюсь разработать функцию использования стрелок вверх и вниз для выбора предыдущей или следующей строки таблицы, я использую мышеловку для привязки горячих клавиш к элементу, вот пример того, что у меня есть:

в сетке: 

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

IЯ использую контролируемое состояние для выбора, но также нетрудно узнать, какой идентификатор строки будет следующим после использования плагинов IntegratedSorting и IntegratedFiltering

...