input select 实现自动获取焦点
在我们平时的项目中，经常会遇到，新增一行数据，这行数据的某个输入框或是下拉框能够自动获取焦点， 编辑同理；这个问题可能会难住一些小伙伴，下面就来看一下我的实现方式吧
以react 为例
1.首先需要获取dom实例。即输入框或是下拉框dom元素的真正实例定义一个firstInput,;
2.因为列表数据有多条，需要指定某一条，再定义一个focusId
3.新增一行数据的数据，需要将新增数据的唯一键值赋值给focusId, 同时获取焦点，获取焦点后，将focusId清空
this.focusId = id focusInput(this.firstInput) this.focusId = null 复制代码
// 新增行或是更改行的时候获取焦点 export function focusInput(input) { setTimeout(() => { if (input && input.input && typeof input.input.focus === 'function') { input.input.focus() } else if (input && typeof input.focus === 'function') { input.focus() } }, 0) } 复制代码4.使用ref 属性 输入框或是下拉框的绑定获取dom实例
<Select ref={(node) => record.id === this.focusId && (this.firstInput = node) } { feeItemList.map(item=><Select.Option value={item} key={item}>{item }</Select.Option>)} </Select> >
作者：小前端一枚_
链接：https://juejin.cn/post/7033950050745057316