点击Enter，切换到下一个输入框进行输入

点击Enter，快速切换到下一个输入框进行输入

框架react+antd

1.ref获取需要调用React.createRef()，react版本要在16.3以上

该项目react版本过低，不能使用此方法

2.多个输入框，使用index进行拼接保证唯一性，获取dom，将focus()进行调用

3.使用antd的原生方法，enter触发onPressEnter

{
  title: '调拨数量',
       dataIndex: 'num',
       key: 'num',
       width: '10%',
       className: styles.clickTetxsss,
       render: (value, item, index) => {
           return (<InputNumber placeholder="请输入" data={item.id}
                                className={styles.clickTetx + ' ' + styles.clickInputNumber}
                                value={item.num}
                               //  ref={`input${index}`}
                                id={`input${index}`}
                                onPressEnter={()=>this.onPressEnter(index,'input')}
                                onChange={this.onChangeInputNum.bind(this, item.id)}></InputNumber>);
       }
}

onPressEnter=(index)=>{
  const {goodsColumnsData} = this.state;    
    if(goodsColumnsData.length === (index + 1)){
        const inputId = document.getElementById(`input${0}`);
        inputId.focus();
    }else{
        const inputId = document.getElementById(`input${index+1}`);
        inputId.focus();
    }

    // this[`input${index}Ref`] = React.createRef(); //获取不到，react版本问题

    // let indexKey = index + 1
    // let key = type + indexKey //拼接refs 例如 input0、input1这样
    // // if (this.list.length != (index + 1)) {//判断是否在最后一个输入框
    // this[`input${key}Ref`].current&&this[`input${key}Ref`].current.focus();
}

网上看的vue实现

<a-input-number
  :ref="'input' + index"
  @pressEnter="nextFocus(index,'input')"
  @focus="focusModel($event)"
  v-model="item.num"
  :min="0"
  :max="1000000"
  :precision="2"
  style="width: 100%" />

//敲回车，聚焦到下一个输入框 type是因为有多个类型的输入框，例如数量、价格等等
nextFocus(index,type){
	let indexKey = index + 1
	let key = type + indexKey //拼接refs 例如 input0、input1这样
	if (this.list.length != (index + 1)) {//判断是否在最后一个输入框
      this.$nextTick(() => {
        this.$refs[key].focus()
      })
    }
},
//输入框聚焦事件，选中输入框全部数据，第一张图绿色那个样子
focusModel(e) {
  e.currentTarget.select()
},