reactjs - 外部アクションからの react-select の複数の選択フィールドの値をクリアする

Question

https://github.com/JedWatson/react-selectを使用して、UI に単一/複数選択リストのセットを表示しています。そして今、すべてのフィールド値を一度にクリアする必要があります。

ドキュメントには、要素 -Clearableプロパティの中または横にクリアボタンを追加するオプションがあります。しかし、コンテナー コンポーネント レベルの要素の外側から、たとえば redux 状態を使用して呼び出したいと考えています。

コンポーネント構造は次のとおりです。

  renderSelectFilters() {
    const { filters } = this.props;
    return (
      filters.map((filter) => {
        if (filter.type == 'Checkbox' || filter.type == 'Select') {
          return (
            <SelectContainer
              key={filter.name}
              name={filter.name}
              options={filter.options}
              multi={filter.type == 'Checkbox' ? true : false}
              handleChange={this.handleChange}
              clearValues={this.clearValues}
              searchable={filter.type == 'Checkbox' ? true : false}
            />
            );
        }
      })
    )
  }
  clearFilters() {
      //stuff here
  }

  renderClearFiltersButton = () => { 
    return ( 
      <Button 
        text={'Clear Filters'} 
        onClick={this.clearFilters} 
      /> 
    ) 
  } 

   render() {
    return (
      <div className="filters-bar">
        <div className="some-class">
          {this.renderSelectFilters()}
          {this.renderClearFiltersButton()}
        </div>
      </div>
    )
  }

私はこのソリューションをチェックしましたが、フィルターを保持しながら React-select clear value を確認しましたが、値を完全に削除するのではなく、既存の値を設定することです。