javascript - 在 AntD 分拣机上需要键盘可访问性(tab+enter)
问题描述
在 antDesign Table 中,sorter 会生成默认的 caret-up 和 caret-down 图标。
作为要求,
- 我需要在插入符号和插入符号向下图标上使用 tabIndex="0" 进行键盘访问以进行导航。
- 在插入符号向上/插入符号向下图标上输入 onKeyPress,我需要它们进行排序。
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
const columns = [
{
title: 'Chinese Score',
dataIndex: 'chinese',
sorter: {
compare: (a, b) => a.chinese - b.chinese,
multiple: 3,
},
},
{
title: 'Math Score',
dataIndex: 'math',
sorter: {
compare: (a, b) => a.math - b.math,
multiple: 2,
},
},
{
title: 'English Score',
dataIndex: 'english',
sorter: {
compare: (a, b) => a.english - b.english,
multiple: 1,
},
},
];
const data = [
{
key: '1',
name: 'John Brown',
chinese: 98,
math: 60,
english: 70,
},
{
key: '2',
name: 'Jim Green',
chinese: 98,
math: 66,
english: 89,
},
{
key: '3',
name: 'Joe Black',
chinese: 98,
math: 90,
english: 70,
},
{
key: '4',
name: 'Jim Red',
chinese: 88,
math: 99,
english: 89,
},
];
function onChange(pagination, filters, sorter, extra) {
console.log('params', pagination, filters, sorter, extra);
}
ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, document.getElementById('container'));
添加了AntD的图片
解决方案
推荐阅读
- java - 如何显示 Room 数据库中的数据而不是哈希码?(安卓工作室,Java)
- c - 将字符串写入字符串但在其旁边的代码
- c++ - 用派生类初始化(分配)基类 shared_ptr
- ruby-on-rails - 在 AWS Cloud 9 上预览 rails 服务器:VFS 连接不存在 [仅限 Firefox]
- javascript - 如何在 Solidity 中构建 HTML 解决方案
- javascript - 循环后返回对象中未定义值的函数
- java - 在android studio中单击时如何使复选框可编辑
- docker - Docker-compose:显示有效配置?
- acumatica - 单击按钮时如何调用方法
- javascript - 循环内的计算以及如何返回值的总和。Vuejs