綁定到React中的Select組件時重置狀態

Question

我的狀態如下所示：

this.state = {
  shoe: {
    selectedBrand: "",
    selectedEU: "",
    selectedUS: "",
    selectedUK: "",
    selectedFraction: "",
    thumbnail: null
  }
};

這綁定到幾個Select組件，如下所示：

<Select value={this.state.shoe.selectedUK.value}
        onChange={this.updateSelectedValues.bind(this, "selectedUK")}
        options={uk}
/>

用戶單擊按鈕后，我想重置狀態，但是到目前為止，我還不能這樣做。

這是我嘗試過的：

• 創建了InitialState，但是由於原始狀態已發生突變，因此我猜想此初始狀態也會發生變化，或者這是一個新實例嗎？

• 嘗試使用this.SetState({...})手動更新字段

有什么建議么？

Answer 1

它應該通過執行this.setState({...}) ，其中...您想重置為的對象。

但是，如果定義一個對象，然后重新使用它來重置所有內容，則可能會更容易。

constructor() {
  super();
  this.initialState = {
    shoe: {
      selectedBrand: "",
      selectedEU: "",
      selectedUS: "",
      selectedUK: "",
      selectedFraction: "",
      thumbnail: null
    }
  };
  this.state = {shoe: {...this.initialState}};
}

那么您可以使用以下方式重置：

onReset() {
  this.setState(this.initialState);
}