React/Typescript：如何使用 onChange 在 setter 中键入值

Question

我是 react/typescript 的新手，我在使用 Onchange 来“键入”值时遇到问题。 这是代码：

    interface Props {
  race : CharacterRace | '',
  classe : CharacterClass | '',
  sexe : CharacterGender | '',
  setRace : (race : CharacterRace | '')=>void,
  setClasse : (classe : CharacterClass | '')=>void,
  setSexe : (sexe: CharacterGender | '')=>void
}
...
          <select name="race" id="race" value={props.race} onChange={({ target: { value } })=>props.setRace(value)}>
        <option value=""> </option>
        <option value="humains">Humain</option>
        <option value="elfes">Elfe</option>
        <option value="orcs">Orc</option>
        <option value="mort-vivants">Mort-Vivant</option>
        <option value="nains">Nain</option>
      </select>

他告诉我“值”是一个字符串，不能赋值给 CharacterRace | ''

如果我这样做：

 setClasse : (classe : CharacterClass | string)=>void,

那“解决”了问题，但它只是一个黑客，它不干净

我尝试输入“值”，但没有成功

你知道我该如何解决吗？

类型：

    export type CharacterRace = 'humains' | 'elfes' | 'orcs' | 'mort-vivants' | 'nains';

    export type CharacterClass = 'guerrier' | 'barbare' | 'paladin' | 'rodeur' | 'voleur' | 'mage' | 'pretre' | 'guerrier-mage';
    
    export type CharacterGender = 'masculin' | 'feminin';

Answer 1

你应该使用“HTMLInputElement”