Reactjs 是否有多种元素类型声明的快捷方式

Question

我正在从表单中获取值。我正在使用 tsx为我的项目。但是我很不高兴使用这样的长元素类型:

handleChange = (e:React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLSelectElement>, id: string ) =>{
        e.preventDefault();
        const {value} = e.target;
        this.setState((prev) => ({fields: {...this.state.fields, [id]:value}}));
        console.log(id, this.state.fields);
    }

哪里 e (事件)有: e:React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLSelectElement>这么长的类型声明。有没有办法缩短这个？或任何其他类型的帮助来处理所有表单元素？
提前致谢。

Answer 1

好吧，你可以这样做:

handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, id: string ) =>{

这绝对更简洁一些。或者如前所述，您可以简单地将类型声明别名为 type :

type FormChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;

// ...

handleChange = (e: FormChangeEvent, id: string ) =>{

但除此之外，据我所知，没有包含您正在寻找的确切更改事件的现有类型别名。也不应该有，因为这些元素出于某种原因具有不同的类型定义，并且 e.target应该相应地反射(reflect)它们。
根据您的用例，您可以为事件定义一个简单的、有限的类型，该类型仅提供您实际需要的类型信息。根据我的经验，做这样的事情相当普遍，这正是你遇到的原因——有时简洁和简单比厨房水槽式的完成主义更有值(value)。

handleChange = (e: { target: { value: string}; preventDefault: () => {} }, id: string ) =>{

编辑:您可以在这里做的另一件事是简单地输入 e如 any .如果您知道自己在做什么并且很小心，那么这是相当安全的——或者，至少不会比我们拥有 TypeScript 之前的日子更危险。

handleChange = (e: any, id: string ) =>{