reactjs - React + Typescript: ¿Cómo tipar event.target.name al estado?

Tengo un estado de React que fue definido como una interfaz y tiene claves con nombres específicos...

Probé una solución a continuación que técnicamente debería funcionar según las claves del estado, pero aún me da el error

{ [x: string]: string; }' provides no match for the signature  ...

¿Cuál es la mejor manera de hacer esto...?

interface State {
    responses: string,
    comments: string,
}


  state = {
    responses: '',
    comments: '',
  };

  handleChange = (e: React.ChangeEvent<HTMLInputElement>, value: string): void => {
    const key = e.currentTarget.name;
    Object.keys(this.state).forEach(k => {
      if (k === key) this.setState({ [e.currentTarget.name]: value });
    })
  }

Respuesta #1

El tipo de retorno de Object.keys() es el genérico string[] en lugar de un arreglo de la unión de las claves del objeto, por lo que probablemente sea complicado inferir los tipos correctos aquí. Además, según mi experiencia, las soluciones inteligentes tienden a romperse cuando se lanzan nuevas versiones de TypeScript o de las definiciones de tipos de paquetes, así que en este caso simplemente ayudaría a TypeScript con una firma en el argumento de setState:

handleChange = (e: React.ChangeEvent<HTMLInputElement>, value: string): void => {
  const key = e.currentTarget.name;

  if (Object.keys(this.state).includes(key)) {
    this.setState({[key]: value } as Pick<State, keyof State>);
  }
}

Respuesta #2

public onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({
    [e.currentTarget.name]: e.currentTarget.value
  } as { [K in keyof IState]: IState[K] });
};

IState - interfaz de this.state