代码之家 › 专栏 › 技术社区 › Joff

react+typescript:如何将event.target.name键入state?

typescript reactjs

Joff · 技术社区 · 6 年前

我有som react state,它被定义为一个接口,并且有特定的命名键…

我尝试了下面的一个解决方案,该解决方案在技术上应该基于状态键工作,但它仍然会给我错误

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

最好的方法是什么…

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 });
    })
  }

3 回复 | 直到 6 年前

Oblosys 6 年前

返回类型 Object.keys() 是通用的吗 string[] 而不是对象键的并集数组,因此在这里推断正确的类型可能很困难。而且,根据我的经验,当更新版本的typescript或包类型定义被发布时,智能解决方案有一种崩溃的趋势,因此在这种情况下,我将帮助typescript在 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>);
  }
}

Tomas Kirda 6 年前

一种方法是使用switch语句,而不是遍历键。尽管它将产生更多的代码:

switch (key) {
  case 'responses':
    this.setState({ responses: value });
    break;
  case 'comments':
    this.setState({ comments: value });
    break;
}

JoSSte mirik 6 年前

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

IState -界面 this.state