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

问题描述

我正在从表单中获取值。我正在为我的项目使用 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>

这么长的类型声明。有没有办法缩短这个？或任何其他类型的帮助来处理所有表单元素？

提前致谢。

解决方法

好吧，你可以这样做：

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

这绝对更简洁一些。或者如前所述，您可以简单地使用 type:

对您的类型声明进行别名

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

// ...

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

但除此之外，据我所知，没有包含您正在寻找的确切更改事件的现有类型别名。也确实应该存在，因为这些元素出于某种原因具有不同的类型定义，e.target 应该相应地反映它们。

根据您的用例，您可以为事件定义一个简单的、有限的类型，该类型仅提供您实际需要的类型信息。根据我的经验，做这样的事情相当普遍，这正是你遇到的原因 - 有时简洁和简单比厨房水槽式的完成主义更有价值。

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

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

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