React中TextField组件onSelect事件类型定义问题：解决EventTarget不存在selectionStart属性报错

我来帮你搞定这个类型错误问题！核心原因是你没找对TextField对应的底层元素类型，以及正确的事件泛型参数。

问题分析 #

Material UI的TextField组件，默认情况下底层渲染的是HTML input元素（如果设置了multiline属性则是textarea元素）。selectionStart和selectionEnd是HTMLInputElement和HTMLTextAreaElement特有的属性，而你之前用的Element或HTMLDivElement类型并不包含这些属性，所以TypeScript会抛出类型错误。

正确的解决方案 #

你需要把事件类型指定为React.SyntheticEvent<HTMLInputElement>（如果是多行文本框则用React.SyntheticEvent<HTMLTextAreaElement>），这样TypeScript就能正确识别event.target上的selectionStart和selectionEnd属性了。

修改后的代码如下：

import { useState } from "react";
import { Grid, TextField } from "@mui/material";

export default function App() {
  const [startText, setStartText] = useState<number | undefined>();
  const [endText, setEndText] = useState<number | undefined>();

  // 指定正确的事件类型
  const handleOnSelect = (event: React.SyntheticEvent<HTMLInputElement>) => {
    setStartText(event.target.selectionStart);
    setEndText(event.target.selectionEnd);
  };

  return (
    <Grid container direction="column" className="App">
      You can type here below:
      <TextField 
        value={"This is a example, select a word from this string"} 
        onSelect={handleOnSelect} 
      />
      <br />
      <Grid item>The selected word starts at character: {startText}</Grid>
      <Grid item>The selected word ends at character: {endText}</Grid>
    </Grid>
  );
}

额外说明 #

• 如果你的TextField是多行的（设置了multiline={true}），只需要把事件类型改成React.SyntheticEvent<HTMLTextAreaElement>即可，因为HTMLTextAreaElement同样拥有selectionStart和selectionEnd属性。
• 如果你需要更严谨的类型检查，也可以手动断言event.target的类型，比如const input = event.target as HTMLInputElement;，不过使用正确的泛型参数已经足够让TypeScript自动推断类型了。

内容的提问来源于stack exchange，提问作者Magofoco