react如何获取光标
获取光标位置的方法
在React中获取光标位置通常涉及处理输入框或可编辑元素的光标状态。以下是几种常见场景的实现方法：
输入框的光标位置获取
通过onSelect或onKeyUp事件结合selectionStart和selectionEnd属性：
function InputWithCursor() {
const [cursorPos, setCursorPos] = useState(0);
const handleSelection = (e) => {
setCursorPos(e.target.selectionStart);
};
return (
<input
type="text"
onSelect={handleSelection}
onKeyUp={handleSelection}
/>
);
}可编辑元素的光标位置
对于contentEditable元素需要使用window.getSelection()：
function EditableDiv() {
const [cursorPos, setCursorPos] = useState(0);
const handleBlur = () => {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
setCursorPos(range.startOffset);
}
};
return (
<div
contentEditable
onBlur={handleBlur}
suppressContentEditableWarning
/>
);
}保存和恢复光标位置
当需要操作DOM后保持光标位置时：
function restoreCursor(inputRef, pos) {
inputRef.current.setSelectionRange(pos, pos);
}
// 使用示例
const inputRef = useRef();
const [savedPos, setSavedPos] = useState(0);
const savePosition = () => {
setSavedPos(inputRef.current.selectionStart);
};
const restorePosition = () => {
restoreCursor(inputRef, savedPos);
};处理多行文本的光标
对于textarea元素需要考虑换行符：
function handleTextareaSelect(e) {
const cursor = e.target.selectionStart;
const value = e.target.value;
const lines = value.substr(0, cursor).split('\n');
const lineNum = lines.length;
const colNum = lines[lines.length-1].length;
console.log(`Line: ${lineNum}, Column: ${colNum}`);
}第三方库方案
对于复杂的光标操作可以考虑使用专门库：
react-textarea-autosize：扩展textarea功能draft-js：富文本编辑器框架slate-react：可定制的内容编辑器
以上方法覆盖了React中处理光标位置的主要场景，根据具体需求选择适合的实现方式。注意操作DOM时需要考虑React的渲染周期，建议在useEffect中处理相关逻辑。
