反应 Typescript 输入 onChange 事件类型?
Posted
技术标签:
【中文标题】反应 Typescript 输入 onChange 事件类型?【英文标题】:React Typescript input onChange event type? 【发布时间】:2021-12-30 17:58:35 【问题描述】:我正在尝试从输入元素中获取文本,将其设置为状态,然后将其渲染回输入框中。但是我认为我的事件输入错误?我在网上搜索并尝试实施许多解决方案,但到目前为止都没有奏效。任何帮助表示赞赏。
我的组件:
import React, ChangeEvent, ChangeEventHandler, useState from "react";
export default function Unidirectionflow()
const [state4, setState4] = useState("");
const [state5, setState5] = useState("");
let handleChange4 = (e: React.FormEvent<htmlInputElement>): void =>
setState3((e.target as HTMLInputElement).value);
;
let handleChange5 = (event: ChangeEvent<HTMLInputElement>) =>
setState5(event.currentTarget.value);
;
return (
<main>
<input type="text" value=state4 onChange=() => handleChange4 />
<input type="text" value=state5 onChange=() => handleChange5 />
</main>
);
Typescript input onchange event.target.value
React TypeScript: Correct Types for onChange
Can't type in React TextField Input
https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/
【问题讨论】:
【参考方案1】:你可以这样做
export default function Unidirectionflow()
const [states, setStates] = useState(
state3:'',
state4:''
)
const handleChange = (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
) =>
setStates(
...states,
[e.target.name]: e.target.value.trim(),
);
;
return (
<main>
<input type="text" name="state3" value=states.state3 onChange=handleChange />
<input type="text" name="state4" value=states.state4 onChange=handleChange />
</main>
);
;
【讨论】:
【参考方案2】:调用函数时忘记传递event
试试这个
onChange=(e) => handleChange(e)
或者
onChange=handleChange
代码沙箱 => https://codesandbox.io/s/dreamy-pateu-1mc6j?file=/src/App.tsx
【讨论】:
@Sujio,看看这个!!以上是关于反应 Typescript 输入 onChange 事件类型?的主要内容,如果未能解决你的问题,请参考以下文章