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: (
               {
                  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();
      }
    }
  }

你可能感兴趣的:(React 在table列表中input按方向键上下定位到下一行input并获取焦点)