反应 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 事件类型?的主要内容,如果未能解决你的问题,请参考以下文章

反应:onChange 不更新输入字段的值

反应本机最后一个文本输入框最后没有设置值 onChange

输入 onChange w/ React & TypeScript 错误:jsx no-lambda no-bind

反应搜索 onChange 取消请求

反应 onChange 不更新状态

当状态改变时,对文本字段做出反应 onChange 更新整个组件