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

Answer 1

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

清除反应中的多个选择字段值 - 从外部操作中选择

1 个答案: