美文网首页
React 在table列表中input按方向键上下定位到下一行

React 在table列表中input按方向键上下定位到下一行

作者: 小二二二7 | 来源:发表于2020-04-09 16:57 被阅读0次

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

    相关文章

      网友评论

          本文标题:React 在table列表中input按方向键上下定位到下一行

          本文链接:https://www.haomeiwen.com/subject/vnncmhtx.html