Typescript: React事件类型

React事件的正确类型是什么?

最初为了简单起见，我只是使用any。现在，我正在努力清理，完全避免使用任何东西。

简单的形式是这样的:

export interface LoginProps {
  login: {
    [k: string]: string | Function
    uname: string
    passw: string
    logIn: Function
  }
}
@inject('login') @observer
export class Login extends Component<LoginProps, {}> {
  update = (e: React.SyntheticEvent<EventTarget>): void => {
    this.props.login[e.target.name] = e.target.value
  }
  submit = (e: any): void => {
    this.props.login.logIn()
    e.preventDefault()
  }
  render() {
    const { uname, passw } = this.props.login
    return (
      <div id='login' >
        <form>
          <input
            placeholder='Username'
            type="text"
            name='uname'
            value={uname}
            onChange={this.update}
          />
          <input
            placeholder='Password'
            type="password"
            name='passw'
            value={passw}
            onChange={this.update}
          />
          <button type="submit" onClick={this.submit} >
            Submit
          </button>
        </form>
      </div>
    )
  }
}

我在这里使用什么类型作为事件类型?

反应。SyntheticEvent<EventTarget>似乎不工作，因为我得到一个错误，名称和值在目标上不存在。

对所有事件的更普遍的答案将真的很感激。

谢谢

当前回答

你可以在react中这样做

handleEvent = (e: React.SyntheticEvent<EventTarget>) => {
  const simpleInput = (e.target as HTMLInputElement).value;
  //for simple html input values
  const formInput = (e.target as HTMLFormElement).files[0];
  //for html form elements
}

2019-11-29 13:20:50

其他回答

对于那些正在寻找一个解决方案来获得一个事件和存储一些东西，在我的情况下，一个HTML 5元素，在一个useState这里是我的解决方案:

const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);

const handleMenu = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) : void => {
    setAnchorElement(event.currentTarget);
};

2020-08-19 23:41:12

SyntheticEvent接口是通用的:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
}

(从技术上讲，currentTarget属性在父BaseSyntheticEvent类型上。)

currentTarget是泛型约束和EventTarget的交集。此外，由于你的事件是由输入元素引起的，你应该使用ChangeEvent(在定义文件中，react文档)。

应该是:

update = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
}

(注:这个答案最初建议使用React.FormEvent。评论中的讨论与这个建议有关，但是React。ChangeEvent应该如上所示使用。)

2017-02-07 09:13:19

或者你可以用

const handles = (e: React.UIEvent<'type of element', UIEvent>) => {
//do something
}

2022-09-20 09:36:36

我有以下类型。Ts文件的HTML输入，选择和文本区域:

export type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
export type TextareaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
export type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>

然后导入它们:

import { InputChangeEventHandler } from '../types'

然后使用它们:


const updateName: InputChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateBio: TextareaChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateSize: SelectChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}

然后在标记上应用这些函数(替换…与其他必要的道具):

<input onChange={updateName} ... />
<textarea onChange={updateName} ... />
<select onChange={updateSize} ... >
  // ...
</select>

2020-10-05 21:05:31

以下有相同的类型:

let event1: { target: { value: any } };
let event2: { target: HTMLInputElement } };

2022-03-11 11:54:55

Typescript: React事件类型

推荐文章

最新文章

标签