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 应该相应地反映它们。

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

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

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

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