在columns中的input设置ref以便获取input实例,创建handleKeyboard响应键盘方向键事件,将当前行index和事件传递给handleKeyboard方法
{
title: intl.get('purchaseAmout'),
width: 80,
fixed: 'right',
render: (text, row, index) => {
return {
children: (
<Input
ref={input => {
this['Item' + index] = input;
}}
style={{ color: 'orange' }}
onKeyUp={e => this.handleKeyboard(index, e)}
/>
),
props: {},
};
},
},
keyCode=38为向上键 keyCode=40为向下键,注意index越界问题
handleKeyboard(index, e) {
if (e.nativeEvent.keyCode === 38) {
//↑
if (index > 0) {
const domInputRef = 'Item' + (index - 1);
this[domInputRef].focus();
}
} else if (e.nativeEvent.keyCode === 40) {
//↓
if (index < data.length - 1) {
const domInputRef = 'Item' + (index + 1);
this[domInputRef].focus();
}
}
}
网友评论