React：如何在 onBeforeInput 处理程序中使用 event.data 而不会出现 TypeScript 错误

所以事件接收者onBeforeInput处理程序的类型为React.FormEvent<HTMLInputElement>。这是一个非常通用的类型，不包括data财产。

据我所知的事件onBeforeInput收到 （nativeEvents being KeyboardEvent在火狐浏览器中，TextEvent在 Chrome 中）将会有data财产。

编写使用的处理程序的正确方法是什么event.data没有 TypeScript 抱怨Property 'data' does not exist on type 'FormEvent<HTMLInputElement>'?

onBeforeInput={(e) => {
  handleInput(e.data);
  e.preventDefault();
}}

我发现您还可以执行以下操作，并且不会出现类型错误：

onBeforeInput={(event: React.CompositionEvent<HTMLInputElement>) => {
  const data = event.data
}}

如果您想查看输入中的下一个值与下一个值是什么，您可以执行以下操作：

onBeforeInput={(event: React.CompositionEvent<HTMLInputElement>) => {
  const str = event.currentTarget.value
  const sub = event.data
  const posStart = event.currentTarget.selectionStart || 0
  const posEnd = event.currentTarget.selectionEnd || posStart

  const nextValue = `${str.slice(0, posStart)}${sub}${str.slice(posEnd)}`
}}