Javascript 财产'；选择开始'；不存在于类型'；EventTarget'；

我正在使用

selectionStart

和

selectionEnd

来获取文本选择的起点和终点

代码：

然而，我正在努力定义可以调用它们的事件类型。 如果我使用

any

，代码工作正常，但我更希望知道正确的事件

我试过这些类型：

元素

反应事件

不走运

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

  const handleOnSelect = (event: any) => { <--- I CANNOT FIND THE RIGHT EVENT TYPE
    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={(event) => handleOnSelect(event)}
      />
      <br />
      <Grid item>The selected word starts at character: {startText}</Grid>
      <Grid item>The selected word ends at character: {endText}</Grid>
    </Grid>
  );
}

导出默认函数App（）{
常量[startText，setStartText]=useState（）；
const[endText，setEndText]=useState（）；
const handleOnSelect=（事件：any）=>{


所选单词从字符开始：{startText}
所选单词以字符结尾：{endText}
);
}

这是一个棘手的问题，因为material ui

TextField

组件涉及多个嵌套节点。传递给

onSelect

函数的参数是

div

。但是事件本身发生在

div

内部的

输入上

const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    console.log(event.target, event.currentTarget);
};

因为您知道事件总是发生在
HTMLInputElement
上，所以我认为断言是安全的

const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    const target = event.target as HTMLInputElement;
    setStartText(target.selectionStart);
    setEndText(target.selectionEnd);
};

const handleOnSelect=（事件：React.SyntheticEvent）=>{
const target=event.target作为HTMLInputElement；
设置开始文本（target.selectionStart）；
setEndText（target.selectionEnd）；
};

请注意，
selectionStart
和
selectionEnd
属性使用
null
而不是
undefined
。因此，您需要将状态类型更改为
，或者使用null合并
event.target.selectionStart>undefined
将
null
替换为
undefined
谢谢！我选择了
const target=event.target作为htmlinputtement
，因为if子句总是被跳过（
event.target instanceof htmlinputtement
）
const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    const target = event.target as HTMLInputElement;
    setStartText(target.selectionStart);
    setEndText(target.selectionEnd);
};