reactjs - Dynamisk objekt nøkkel med Typescript i React hendelsesbehandler

Lignende, men forskjellig fra Hvordan kan jeg dynamisk tilordne egenskaper til et objekt i TypeScript?

Jeg har en komponent med statustypen:

{
  low: string
  high: string
}

Og som et vanlig mønster i React, er hendelseshåndtereren min:

handleChange = (e) => {
  let { name, value } = e.target;
  this.setState({ [name]: value });
};

Med high og low som name-attributter på mine input-felt. Typescript gir feil med:

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "low" | "high">'

Finnes det en måte for meg å fortelle Typescript at jeg bare forventer de to verdiene? Jeg ønsker å unngå å eksplisitt sende nøkkelen til handleren, men vil ikke endre tilstanden til noe som dette:

{
  low: string
  high: string
  [key: string]: string
}

Svar #1

I en perfekt verden burde vi kunne skrive noe som dette:

private handleChange = (e: {target: {name: "low" | "high", value: string}}) =>
{
    const { name, value } = e.target;

    this.setState({[name]: value});
}

Men dessverre tvinger en rapportert feil (se her eller her) oss til å bruke en midlertidig løsning som å kaste til any eller lignende:

this.setState({[name]: value} as any);

Relaterte artikler