【react + antd + table组件】上下移动光标

 <div
                 tabIndex={1}
                 onKeyDown={this.handleOnKeydown}
                 style={{outline: 'none'}} 
                 className="ordTempDateil"
                 >
                  <Modal
                    key='3'
                    width='800px'
                    visible={OrdDaShow}
                    closable={false}
                    title={false}
                    centered={true}
                    pagination={false}
                    footer={null}
                    onCancel={this.handleTemDaCancel}>
                    <Table
                      columns={OrdDaColumns}
                      pagination={false}
                      rowClassName={this.setOrdDaRowClassName}
                      onRow={this.onClickOrdDaRow}
                      rowKey={record => record.key}
                      // expandedRowRender={expandedRowRender}
                      dataSource={this.state.ordDetailData}
                      style={{
                        height: '500px',
                        overflow: 'auto'
                      }}
                    />
                    <div style={{ position: "absolute", bottom: "8px" }}>
                      <p>当前允许录入类型:{this.state.OrdCanType}</p>
                    </div>
                    <Pagination
                      showTotal={() => this.showTotal(this.state.total)}
                      size="small"
                      showQuickJumper
                      showSizeChanger
                      defaultCurrent={1}
                      current={this.state.page ? this.state.page : 1}
                      total={this.state.total ? this.state.total : 0}
                      onChange={this.onChange}
                      onShowSizeChange={this.onShowSizeChange}
                      style={{ textAlign: "right", marginTop: '13px' }}
                    />
                  </Modal>
                </div>

　　

 //详细信息页面上下移动
  handleOnKeydown = (e) => {
    var e = window.event || e;
    let id = '';
    const {ordDetailData} = this.state
    let oneArr = ordDetailData&&ordDetailData.length > 0 ? ordDetailData: [];
    switch (e.keyCode) {
    case 13:
        e.preventDefault();
        if (this.state.OrdDaRowId) {
          this.setState({
            visible: false,
          })
            let obj = {}
            for(var i = 0; i < oneArr.length; i++) {
                if (oneArr[i].id === this.state.OrdDaRowId) {
                    obj = i > 0 ? oneArr[i] : oneArr[0];
                    break;
                }
            }
            // console.log("当前",obj)
            this.setState({
              visible: false,
              OrdDaRowId: obj.id, 
              })
            this.checkNowData(obj)
            // this.confirmSelection(obj);
        } else {
            message.info("请选择一条需要操作的数据")
        }
        break;
    case 38: //上
        if (this.state.OrdDaRowId) {
            for(var i = 0; i < oneArr.length; i++) {
                if (oneArr[i].id === this.state.OrdDaRowId) {
                    id = i > 0 ? oneArr[i - 1].id : oneArr[0].id;
                    break;
                }
            }
            this.setState({OrdDaRowId: id})
        } else {
            this.setState({OrdDaRowId: oneArr[0].id})
        }
        break;
    case 40: //下
        if (this.state.OrdDaRowId) {
            for(let i = 0; i < oneArr.length; i++) {
              oneArr[i].disblock = false
                if (oneArr[i].id === this.state.OrdDaRowId) {
                    id = i + 1 >= oneArr.length ? oneArr[oneArr.length - 1].id : oneArr[i + 1].id;
                    break;
                }
            }
            this.setState({OrdDaRowId: id})
        } else {
            this.setState({OrdDaRowId: oneArr[0].id})
        }
        break;
    }
}

　　

ordDetailData table数据  

OrdDaRowId 当前行id

 

  //设置row颜色
    setOrdDaRowClassName = (record) => {
      return record.id === this.state.OrdDaRowId ? 'clickRowStyl' : '';
    }

　主要思路：table数据 行id 控制当前行高亮