Click Enter to quickly switch to the next input box for input
Framework react+antd
1.React.createRef() needs to be called to obtain ref, and the react version must be above 16.3
The react version of this project is too low to use this method
2. Multiple input boxes, use index to stitch together to ensure uniqueness, get dom, and call focus()
3. Using the native method of antd, enter triggers 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 implementation seen online
<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()
},