@ blueprintjs / table, как перемещаться с помощью клавиш со стрелками / вкладками - PullRequest
Новая
       39

@ blueprintjs / table, как перемещаться с помощью клавиш со стрелками / вкладками

0 голосов
/ 27 ноября 2018

Я бы хотел перемещаться @blueprintjs/table с помощью клавиш со стрелками / вкладками.Я следовал этим документам , но не смог найти никакого решения.Может ли кто-нибудь помочь с примером кода / решения.

Мой текущий компонент выглядит следующим образом. 

import React, { Component } from 'react';
import { EditableCell, Column, Table } from "@blueprintjs/table";

class TestComponent extends Component {

    constructor(props) {
        super(props);
        this.renderCell = this.renderCell.bind(this);
    }
renderCell (rowIndex, columnIndex)  {
    const value = null;
    return (
        <EditableCell alue={value == null ? "" : value}/>
    );
}
    render() {
        const columns = ["Please", "Rename", "Me"].map((_ , index) => {
            return (
                    <Column key={index} cellRenderer={this.renderCell} enableFocus="true"/>
            );
    });
        return (
            <Table numRows={7} enableFocus="true">{columns}</Table>
        );
    }
}
export default TestComponent;

1 Ответ

0 голосов
/ 30 ноября 2018

Я получил решение, поэтому отвечая на мой собственный вопрос.

мы должны использовать enableFocusedCell="true" для компонента Table, чтобы включить навигацию с помощью стрелки / табуляцииключи.

Ниже приведен пример кода.

сначала импортируйте css

import "@blueprintjs/table/lib/css/table.css";

, затем создайте компонент, подобный следующему 

import React, { Component } from 'react';
import { Cell, Column, Table } from "@blueprintjs/table";
const cellRenderer = (rowIndex) => {
    return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
};
class LedgerGroup extends Component {

    constructor(props) {
        super(props);
    }


    render() {
        return (
            <Table numRows={10} enableFocusedCell="true">
                <Column name="Dollars 1" cellRenderer={cellRenderer}/>
                <Column name="Dollars 2" cellRenderer={cellRenderer}/>
            </Table>
        );
    }
}
export default LedgerGroup;
...