Javascript React钩子类型脚本事件和状态类型

React.js的状态和事件有哪些类型

在我下面的代码中，我只能通过使用

type:any

使其工作，但这只是一个黑客程序。我如何为它们使用正确的类型

在我的自定义挂钩中：

如果我使用

函数useFormFields（initialState:object）

，我会得到：

// value={inputs.item} error:
Property 'item' does not exist on type 'object'.ts(2339)
// onChange function error:
(JSX attribute) onChange: object
No overload matches this call.

如果我使用

函数（event:React.FormEvent）

（这是真的），我有以下错误：

Property 'id' does not exist on type 'EventTarget'.ts(2339)

Property 'target' does not exist on type 'object'.ts(2339)

如果我使用

函数（事件：对象）

，我有以下错误：

Property 'id' does not exist on type 'EventTarget'.ts(2339)

Property 'target' does not exist on type 'object'.ts(2339)

这很奇怪，因为我在下面使用了

constHandleSubmitItem=（event:React.FormEvent）

，它可以工作

我发现的答案（如）对我不适用，因为类型“EventTarget”上不存在属性“id”

import React，{useState}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/AddShoppingCart”导入AddShoppingCartIcon；
/**
*输入字段的自定义挂钩。
*@param initialState输入字段的initialState
*/
函数useFormFields（初始状态：任意）{
常量[输入，设置值]=使用状态（初始状态）；
返回[
投入，
功能（事件：任意）{
设定值({
…输入，
[event.target.id]：event.target.value
});
}
];
}
导出默认函数FormPropsTextFields（）{
常量[inputs，handleInputChange]=useFormFields({
项目：“”，
数量：“”，
存储区：“”
});
const handleSubmitItem=（事件：React.FormEvent）=>{
event.preventDefault（）；
控制台日志（输入）；
};
返回(
);
}

由于每个组件可能不同，您需要自己定义状态和道具类型。有一些基本类型是为react定义的（因为每个组件可能都有

子类，例如
），但正如我所说的，您需要定义自己的类型

功能组件的示例：

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

const-App:React.FC=（{message}）=>(
{message}
);

上面的例子也可以这样写：

type MyType = { message: string }
const App: React.FC<MyType> = ({ message }) => (
  <div>{message}</div>
);

type MyType={message:string}
const-App:React.FC=（{message}）=>(
{message}
);

在此进一步阅读：

由于每个组件可能不同，您需要自己定义状态和道具类型。有一些基本类型是为react定义的（因为每个组件可能都有
子类，例如
），但正如我所说的，您需要定义自己的类型

功能组件的示例：

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

const-App:React.FC=（{message}）=>(
{message}
);

上面的例子也可以这样写：

type MyType = { message: string }
const App: React.FC<MyType> = ({ message }) => (
  <div>{message}</div>
);

type MyType={message:string}
const-App:React.FC=（{message}）=>(
{message}
);

在此进一步阅读：

将军们！答案

希望有帮助


从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/TextField”导入TextField；
从“@material ui/icons/AddShoppingCart”导入AddShoppingCartIcon；
从“React”导入React，{useState}；
导出接口MyModel{
项目：字符串；
数量：字符串；
存储：字符串；
}
/**
*输入字段的自定义挂钩。
*@param initialState输入字段的initialState
**/
函数useFormFields（初始状态：T）{
常量[输入，设置值]=使用状态（初始状态）；
返回[
投入，
函数（事件：React.FormEvent）{
常量{name，value}=event.currentTarget；
设定值({
…输入，
[名称]：值
});
}
];
}
导出默认函数FormPropsTextFields（）{
常量[inputs，handleInputChange]=useFormFields({
项目：“”，
数量：“”，
存储区：“”，
});
const handleSubmitItem=（事件：React.MouseEvent）=>{
event.preventDefault（）；
/***
确保在“html标记”中具有所需的任何属性
*/
常量{name，value}=event.currentTarget；
控制台日志（输入）；
};
返回(
);
}
将军们！答案

希望有帮助


从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/TextField”导入TextField；
从“@material ui/icons/AddShoppingCart”导入AddShoppingCartIcon；
从“React”导入React，{useState}；
导出接口MyModel{
项目：字符串；
数量：字符串；
存储：字符串；
}
/**
*输入字段的自定义挂钩。
*@param initialState输入字段的initialState
**/
函数useFormFields（初始状态：T）{
常量[输入，设置值]=使用状态（初始状态）；
返回[
投入，
函数（事件：React.FormEvent）{
常量{name，value}=event.currentTarget；
设定值({
…输入，
[名称]：值
});
}
];
}
导出默认函数FormPropsTextFields（）{
常量[inputs，handleInputChange]=useFormFields({
项目：“”，
数量：“”，
存储区：“”，
});
const handleSubmitItem=（事件：React.MouseEvent）=>{
event.preventDefault（）；
/***
确保在“html标记”中具有所需的任何属性
*/
常量{name，value}=event.currentTarget；
控制台日志（输入）；
};
返回(
);
}
我在您找到的解决方案中做了一些更正。
希望有帮助

import-React，