React 在table列表中input按方向键上下定位到下一行input并获取焦点

在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();
      }
    }
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容