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 while keep filter但它是关于设置现有值而不是完全删除该值。

Answer 1

我会将 react-select 值与 redux 同步，这样当您清除 redux 中的值时，它会在 react-select 上自动清除。