React 和 TypeScript 中的表单，带有 DRY 更改句柄

Question

我正在寻找使用 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 = name as keyof IState;
    // @ts-ignore
    this.setState({
      [n]: value,
    });
  }
}

我使用原生 HTML 的name属性作为存储字段名称。n变量将只有login或password值。任何其他值都是不可能的。我可以告诉 TypeScriptn变量是"login" | "password"文字类型吗？即使我使用，TypeScript 也将其n视为string类型变量：

const n = name as keyof IState;

或者

const n = name as "login" | "password";

然后，当我删除时，// @ts-ignore我收到错误：

Type error: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'IState | Pick<IState, "login" | "password"> | ((prevState: Readonly<IState>, props: Readonly<IProps>) => IState | Pick<IState, "login" | "password"> | null) | null'.
Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<IState, "login" | "password">': login, password  TS2345

但是当我硬编码时没有错误：

const n = "login";

有什么方法可以强制"login" | "password"类型为n变量？或者任何其他handleChange没有优化问题和纯 TypeScript 的DRY 解决方案？

Answer 1

我们可以Pick用来确保您正在设置一个已在您的IState界面中定义的键。

private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = e.currentTarget;
    this.setState({
        [name]: value
    } as Pick<IState, keyof IState>);
};

或者您可以使用替代方法，Partial这将使您的所有状态键可选。

class App extends React.Component<{}, Partial<IState>> {
    // ... rest of component
}