與打字稿反應 - 使用 setState 進行類型安全

Question

所以我最近發現事件處理程序的回調對渲染性能不利： https : //reactjs.org/docs/handling-events.html

我試圖通過在類方法中從事件中獲取屬性而不是執行以下操作來注意這一點： onClick={({value}) => this.setState({"someProperty" as keyof State: value})}等。

但是，現在我無法在該回調中顯式聲明類型安全性，我正在嘗試對其進行動態處理，並且我的類型檢查器對下面的代碼沒問題，但是如何讓它抱怨具有name屬性的輸入元素不是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>
    );
  }

}

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