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>                                             >