TypeScript&React - 一个用于多个输入字段的onChange Handler

假设我有一个包含多个输入字段的表单.在正常的ES6/React中,我会创建一个所有输入字段指向其onChange处理程序的方法.像这样的东西:

handleChange(e) {
    e.preventDefault();
    this.setState({[e.target.name]: e.target.value});
}

这有助于您拥有大量表单元素并且不必创建特定方法来处理每个表单元素.

这在TypeScript中是否可行？即使它不是类型安全的？

正如评论中所回答的那样,您在JavaScript中可以做的一切也都是有效的TypeScript.

但是,我猜你会从TypeScript编译器中获得错误(取决于你设置的编译器选项).

假设您的组件看起来像这样:

interface ComponentProps { }
interface ComponentState {
  name: string
  address: string
}

class MyComponent extends React.Component {
  handleChange(e) {
    e.preventDefault()
    this.setState({ [e.target.name]: e.target.value })
  }
}

我收到这个错误:

==外部:(30,19):错误TS2345:类型'{[x:number]:any; }'不能赋值给'ComponentState'类型的参数.

==外部:类型'{[x:number]中缺少属性'name':any; }".

当使用noImplicitAny编译器选项(我喜欢使用)时,这个附加错误:

==外部:(28,16):错误TS7006:参数'e'隐式具有'any'类型.

如果您确定您的代码是正确的,您可以通过显式地为参数handleChange和参数显示来消除这些错误setState

  handleChange(e: any) {
    e.preventDefault()
    this.setState({ [e.target.name]: e.target.value } as ComponentState)
  }

我这样解决了这个问题：

handleChange = (field: string) => (event) => {
    this.setState({ [field]: event.target.value } as Pick);
};

...

接受的答案对我不起作用。