外部アクションからの反応選択で複数の選択フィールド値をクリアする

Question

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

文書には、要素の内または隣にクリアボタンを追加するオプションがあります（Clearableプロパティ）。しかし、私はそれをコンテナコンポーネントレベルの要素の外側から呼び出すことを望んでいます。例えば、還元状態を使用します。次のように

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

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 while keeping filterをチェックしましたが、それは完全に値を削除しない既存の値を設定することについてです。

Answer 1

私は反応選択値をreduxと同期させるので、あなたがreduxで値をクリアすると反応選択で自動的にクリアされるようにします。