Question

我有som react状态，该状态被定义为接口，并且具有特定的所有已命名键...

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

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

Answer 1

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

Answer 2

一个选择是使用switch语句，而不是遍历键。尽管会产生更多代码：

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

Answer 3

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

IState-this.state

的界面

Answer 4

如果您使用数字类型声明状态，请使用以下代码更新状态：

 this.setState({ ...this.state, [event.currentTarget.name]: Number(event.target.value) });

如果使用字符串类型声明状态，则使用此代码更新状态：

this.setState({ ...this.state, [event.currentTarget.name]: event.target.value });

完整代码：

onChange =(event: React.ChangeEvent<HTMLInputElement>) => {
            this.setState({ ...this.state, [event.currentTarget.name]: Number(event.target.value) });
        }

React + Typescript：如何输入event.target.name来说明？

4 个答案: