我尝试在一个React TypeScript文件中实现:
export class MainInfo extends Component<IProps>{
continue = e => {
e.preventDefault();
this.props.nextStep();
};
render() {
const { values1, handleChange } = this.props
return (
<div>
<Formik
validateOnChange={true}
validationSchema={validationSchema}
initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }}
onSubmit={(data) => {
console.log(data)
}}
但是我收到一个参数'e'隐式地有一个'any'类型的React TypeScript错误。我应该如何解决这个问题?
编辑:我在另一个文件中有这些,我在这里用它们作为 prop
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1
});
};
// Go back to prev step
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1
});
};
// Handle fields change
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
7条答案
按热度按时间6ss1mwsb1#
在编写TypeScript时,您应该参考库的源代码或文档以了解其类型
例如,在Formik的
types.tsx
中,我们看到我们还可以查看React的类型:
比如说
也许对你有用
如果你的IDE支持TypeScript,那也会有帮助。
qhhrdooz2#
你必须给予
e
一个类型。例如:如果你不给变量和函数参数赋类型,Typescript会对你大喊大叫。
rryofs0p3#
有趣的是,如果您正在编写内联事件处理程序,您将不会看到此错误,但为什么您会在此上下文中看到它?
你看到错误消息的原因是因为TypeScript中的类型推理系统及其工作方式。
TypeScript总是试图找出在应用程序中流动的不同类型的值,这就是类型推理系统所做的。
让我用一个屏幕截图来演示。在下面的屏幕截图中,我将鼠标移到
onChange
上,你会注意到TypeScript 100%知道onChange
的prop是什么,它知道它是一个prop,它知道我需要向它提供某种回调函数。它说,如果我决定向onChange
提供该函数,它将有一个名为event
的第一个参数,其类型为React.ChangeEvent<HTMLInputElement>
:如果我将鼠标放在
e
上,请注意我得到了完全相同的类型:但是,如果我提前定义了函数,类型推断系统就不会被应用。即使我提前定义了函数并将其传递到
onChange
prop中,类型推断也不会被应用。只有在我们直接内联定义回调函数时,类型推断才在JSX内部定义。
那么如何解决这个问题呢?我们如何在我的示例中提前定义
onChange
,并且仍然注解我的事件对象的类型?好吧,我可以将鼠标移到
onChange
上,就像你在上面的屏幕截图中看到的那样,突出显示并复制事件的类型React.ChangeEvent<HTMLInputElement>
,在event
后面放一个冒号,然后粘贴该类型。在我的例子中,它将是:
这意味着,为了解决你的问题,它看起来像这样:
注意到事件类型是
ChangeEvent
吗?请注意,在React代码中还有其他事件,例如悬停或拖动,您可能也想注解。只是需要注意的一些事情。e4eetjau4#
如果您想使用
onSubmit
处理程序处理表单提交,请将React.FormEvent<HTMLFormElement>
类型赋给e
:gwbalxhn5#
我在尝试为onChange事件添加事件处理程序时也遇到了同样的问题。
event.target.name 显示事件隐式具有“any”类型的错误。
向事件添加类型不起作用,然后注意到我用.tsx扩展名而不是.jsx命名了我的文件
将类型更改为jsx解决了我的问题。
ljsrvy3e6#
在你的代码中,你只需要将事件的类型设置为FormEvent,然后从react中导入它。
pexxcrt27#
在这种情况下,e是某种类型的事件。如果你不知道什么类型的东西是'任何'是默认的,例如。
因此,在短期内使用any。如果您想确切地知道它是什么类型,它可能是一个输入事件,您可能会发现这个Typescript input onchange event.target.value很有用