小编Dzw*_*nkg的帖子

我正在寻找使用 TypeScript 在 React 中管理表单状态的最佳方法。我的简单表单有两个值：login和password字段。我实现IState了表单状态接口和 DRYhandleChange方法，用于在状态中存储新值，而无需在每次render()执行时重新创建函数。

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

class LoginForm extends React.Component<{}, IState> {
  public state = {
    login: "",
    password: "",
  };

  public render() {
    const { login, password } = this.state;
    return (
      <form>
        <input name="login" value={login} onChange={this.handleChange}/>
        <input name="password" value={password} onChange={this.handleChange} type="password"/>
      </form>
    );
  }

  private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = e.currentTarget;
    const n …