小编典典

打字稿:反应事件类型

all

React 事件的正确类型是什么。最初我只是any为了简单而使用。现在,我正在尝试清理东西并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>
    )
  }
}

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

React.SyntheticEvent<EventTarget>似乎没有工作,因为我收到一个错误name并且value不存在于target.

非常感谢所有事件的更通用的答案。

谢谢


阅读 60

收藏
2022-06-14

共1个答案

小编典典

SyntheticEvent接口是通用的:

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

(从技术上讲,该currentTarget属性位于父BaseSyntheticEvent类型上。)

currentTarget是通用约束 和 的 交集EventTarget
此外,由于您的事件是由输入元素引起的,您应该使用ChangeEvent在定义文件中,反应文档中)。

应该:

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

(注意:此答案最初建议使用React.FormEvent。评论中的讨论与此建议有关,但React.ChangeEvent应如上所示使用。)

2022-06-14