Question

我正在尝试使用打字稿的基本形式。我有下面的表格，弄清楚了所有的类型。我无法获取事件名称来动态设置状态。

这是我的代码：

import React, { Component, FormEvent } from 'react';
import './App.css';

interface IState {
  email: string;
  password: string;
}

class App extends Component<object, IState> {
  constructor(props: any) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  public render() {
    return (
      <div>
        <input
          id="txtEmail"
          placeholder="Enter Email"
          onChange={this.handleChange}
          value={this.state.email}
        />
        <input placeholder="Password" onChange={this.handleChange} value={this.state.password} />
      </div>
    );
  }
  private handleChange(event: React.FormEvent<HTMLInputElement>) {
    const target = event.target as any;
    console.log(target.name);
    this.setState({ [target.name]: target.value } as IState);
  }
}

export default App;

console.log(event.name)为空，因此未设置我的状态。我尝试添加和删除event.persist()并使用event.target似乎没什么名字。这和我的打字有关吗？

每当我在文本框中键入内容时，target.value属性都会正确传递。

Answer 1

将name属性添加到您的输入中。例如

       <input id="txtEmail"
          name="txtEmail"
          placeholder="Enter Email"
          onChange={this.handleChange}
          value={this.state.email}
        />

Typescript onChange未传递event.Name以动态更新道具

1 个答案: