点击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()
},