标签：timeout ima lan index 方法 start src out hand
记录：
使用React.createRef()方法（React 16.3+）
，创建一个ref, 使用一个变量存储。然后把ref挂载在dom节点上，通过current拿到该实例 -- dom节点信息，然后就可以使用原生dom的api方法
1.constructor下 将ref赋值给一个变量
this.diagInput = React.createRef();
使用场景 antd table组件中的行编辑：
把这个ref绑定在需作用的dom节点上 （Columns下）
{
align: "center",
title: ‘模板内容‘,
dataIndex: ‘templet‘,
key: ‘templet‘,
editable: true,
render: (text, record, index) => {
if (record.editable) {
return (
<TextArea ref={this.diagInput} id={record.key} value={text} onChange={(e) => this.handleFieldChange(e, ‘templet‘, record.key)} />
)
} if (!record.editable) {
return (
<TextArea readOnly id={record.key} style={{ resize: "none", border: "0" }} value={text} />
)
}
return text;
},
},
d点击编辑时 设置光标进入 fouce
this.diagInput.current.focus();
发现光标虽然进入 但是并没有到文本最后 ，一直在开头
设置延时无果 增长延时无果 将TextArea标签换成Input 奏效 ---实际场景需用到文本 input不妥 一山不通 另山通
setTimeout(() => {
this.diagInput.current.focus();
}, 300)
h换一种方法 直接获取到当前dom节点 通过光标事件 将光标定位到内容最后
getFocusDom 方法---接收参数 (参数需要拿到当前编辑的那行dom 根据需求 定义是否要传) 我这是通过 document.getElementById(record.key)获取当前dom
//光标定位到文本最后
getFocusDom = (e, record) => {
var fDOM = document.getElementById(record.key);
var len = record.templet.length;
this.setSelectionRange(fDOM, len, len);
}
setSelectionRange = (input, selectionStart, selectionEnd) => {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd(‘character‘, selectionEnd);
range.moveStart(‘character‘, selectionStart);
range.select();
}
}
o了_ !
打爆竹~~
标签：timeout ima lan index 方法 start src out hand
原文地址：https://www.cnblogs.com/522040-m/p/12909720.html
