React Native中TextInput的onChange事件的TypeScript类型

Question

我有一个使用TypeScript的React Native Expo项目。我如何为TextInput的onChange事件添加类型？

    <TextInput
      keyboardType="numeric"
      value={`${value}`}
      onChange={(e: React.FormEvent<HTMLInputElement>): void => {
        set({ value: e.target.value });
      }}
    />

我遇到了这个错误：

TS2339：类型"EventTarget"上不存在属性"value"

- Evanss

---

这个回答解决了你的问题吗？Typescript input onchange event.target.value - Jared Smith

@JaredSmith 不，我仍然在收到错误。React Native使用与React相同的类型吗？ - Evanss

在某个层面上，DOM与React Native使用的iOS/Android构建块子集是不同的，但如果类型差异如此之大，我会感到有些惊讶。我认为你的问题（正如链接中的答案所指出的那样）是目标(target)与当前目标(currentTarget)之间的区别。对于目标(target)，编译器必须假定最坏的情况，并且并非所有DOM元素（或本地视图）都将具有值属性。 - Jared Smith

Answer 1

事件的类型是NativeSyntheticEvent<TextInputChangeEventData>，您可以从“react-native”导入它们两个。该事件有一个名为nativeEvent的属性，其中包含文本。

import { View, TextInput, NativeSyntheticEvent, TextInputChangeEventData } from "react-native";

...

const onChange = (e: NativeSyntheticEvent<TextInputChangeEventData>): void => {
    const value = e.nativeEvent.text;
    doStuff(value);
  }
  
...

<TextInput onChange={onChange} />
  

- giotskhada

---

太棒了！我感觉关于React Native和Typescript的文档非常少，你能推荐一些吗？ - Karl Adler