记录：
使用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;
},
},
{
title: '操作',
dataIndex: 'operation',
key: 'action',
align: "center",
key: 'operation',
80,
render: (text, record, index) => {
if (record.isAdd) {
return (
<span style={{ textAlign: "center" }}>
<a style={{ color: "red" }} onClick={(e) => this.cut(e, record.key)}>删除</a>
</span>
)
}
if (!record.editable) {
return (
<span style={{ textAlign: "center" }}>
<a onClick={(e) => this.toggleEditable(e, record.ID, record)}>编辑</a>
</span>
)
} else {
return (
<span style={{ textAlign: "center" }}>
<a onClick={(e) => this.cancel(e, record.key)}>取消</a>
</span>
)
}
}
}
d点击编辑时 设置光标进入 fouce
this.diagInput.current.focus();
发现光标虽然进入 但是并没有到文本最后 ，一直在开头
设置延时无果 增长延时无果 将TextArea标签换成Input 奏效 ---实际场景需用到文本 input不妥 一山不通 另山通
setTimeout(() => {
this.diagInput.current.focus();
}, 300)
h换一种方法 直接获取到当前dom节点 通过光标事件 将光标定位到内容最后
getFocusDom 方法---接收参数 (参数需要拿到当前编辑的那行dom 根据需求 定义是否要传) 我这是通过 document.getElementById(record.key)获取当前dom
Selection对象表示用户选择的文本范围或插入符号的当前位置。要获取用于检查或修改的Selection对象，请使用window.getSelection()
selectionSatrt记录鼠标点击的开始位置，selectionEnd记录结束位置
setSelectionRange 更新光标位置
//光标定位到文本最后
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了_ !
打爆竹~~
