React：如何设置光标选择

Question

我正在使用自定义库，我需要在其中手动设置光标选择。这是我输入的代码：

import React, { useState } from 'react';
import { useDrag } from 'react-dnd'
import { Validation } from "../types";
...
  <input
    ref={forwardRef}
    id={id}
    type={type}
    placeholder={placeholder}
    value={value}
    onChange={onChange}
    onKeyDown={onKeyDown}
    onBlur={onBlur}
    name={name}
    disabled={disabled}
    className={`fb-form-control goggo ${validation?.type}`}
    checked={!!checked}
    draggable={true}
    onDragStart={(event) => event.preventDefault()}
    onMouseEnter={()=>console.error("onMouseEnter", "onMouseEnter")}
    onMouseLeave={() => console.error("onMouseLeave", "onMouseLeave")}
    onDoubleClick={() => console.error("I have been double clicked!")}
  />

我需要将 () => console.error("I have been double clicked!") 替换为对将选择输入文本的函数的调用。此代码：onDoubleClick={() => console.error("this", document.getElementById(String(id))?.select())} 导致“TS2551: Property 'select' does not exist on type 'HTMLElement'. Did you mean 'onselect'?”

Answer 1

你可以使用window.getSelection来选择输入的文本：

onDoubleClick={() => {
  const input = document.getElementById(String(id)) as HTMLInputElement;
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(input);
  selection.removeAllRanges();
  selection.addRange(range);
}}

Answer 2

使用事件目标而不是 getElementById：

onDoubleClick={(event) => event.target.select()}