使用 typescript 做出反应 - 使用 setState 进行类型安全答案

【问题标题】：React with typescript - type safety with setState使用 typescript 做出反应 - 使用 setState 进行类型安全
【发布时间】：2018-10-02 23:33:09
【问题描述】：

所以我最近发现事件处理程序的回调不利于渲染性能：https://reactjs.org/docs/handling-events.html

我试图通过在类方法中从事件中获取属性而不是执行以下操作来注意这一点：onClick={({value}) => this.setState({"someProperty" as keyof State: value})} 等。

但是现在我无法在该回调中显式声明类型安全，我正在尝试动态处理它，并且我的类型检查器对下面的代码没问题，但我怎样才能让它抱怨输入元素有一个 @ 987654323@ 属性不是keyof State？

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  set = ({ currentTarget: { name, value } }: React.SyntheticEvent<HTMLInputElement>): void => {
    this.setState({ [name as keyof State]: value });
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" name="some-name-not-in-state" onChange={this.set} />
      </div>
    );
  }

}

【问题讨论】：

标签： javascript reactjs typescript setstate typesafe

【解决方案1】：

您将name 属性显式转换为State 的键，因此编译器不会抱怨是正常的。

如果您需要类型安全，我会改用闭包：

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  onChange = (name: keyof State) =>
    (e: React.FormEvent<HTMLInputElement>) => {
      const newValue = e.currentTarget.value;
      this.setState({name: newValue});
    }
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" onChange={this.onChange('some-name-not-in-state')} />
      </div>
    );
  }
}

【讨论】：

最好只传递this.onChange 而不调用它并添加名称道具，这样闭包就可以放在孩子身上。现在该函数在每次渲染时都会执行，并且随着这个变化，它只会在变化事件上被调用。