React bootstrap table 是否提供带有清除按钮的 header TextFilter？

Question

我正在使用 react-bootstrap-table 以 table row-column 格式显示数据。

我有一项要求是使用带有清除按钮的 header 过滤器选项来过滤数据。

像这样

<TableHeaderColumn dataField='member' filter={ { type: 'TextFilter', delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>

但此过滤器仅显示 文本框。我也想添加清除按钮。

有没有办法通过在过滤器中启用属性来显示清除按钮？或者我需要为此编写自定义过滤器吗？

<TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getCustomFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>

Answer 1

我开发了带有清除按钮的文本框自定义过滤器。

import React from "react";
import PropTypes from 'prop-types';
import {Form, InputGroup, FormControl, Glyphicon} from "react-bootstrap";

export default class TextWithClearButtonFilter extends React.Component {

  constructor(props) {
    super(props);
    this.filter = this.filter.bind(this);
    this.cleanFiltered = this.cleanFiltered.bind(this);

    this.state = {
      value: this.props.defaultValue || ''
    };

  }

 cleanFiltered() {

    if (this.state.value) {

        var value = this.props.defaultValue ? this.props.defaultValue : '';
        this.setState(function () {
            return { value: value };
        });

        this.props.filterHandler(value);
    }

  }

 filter(event) {

      var _this2 = this;

      if (this.timeout) {

        clearTimeout(this.timeout);
      }

      var filterValue = event.target.value;

      this.setState(function () {
        return { value: filterValue };
      });

      this.timeout = setTimeout(function () {
        if(filterValue){
            _this2.props.filterHandler(filterValue);
        } else {
            _this2.props.filterHandler(_this2.props.defaultValue);
        }
      }, _this2.props.delay);

  }

  render() {
    return (
      <div>
            <InputGroup bsSize="small">
                <FormControl
                    type="text"
                    placeholder="Search"
                    style={{width:90}}
                    onChange={this.filter}
                    value={this.state.value}
                />
                <InputGroup.Addon className="hoverHand" onClick={this.cleanFiltered}>
                    <Glyphicon glyph="remove" />
                </InputGroup.Addon>
            </InputGroup>
      </div>
    );
  }
}

TextWithClearButtonFilter.propTypes = {
  filterHandler: PropTypes.func.isRequired,
  defaultValue: PropTypes.string,
  delay: PropTypes.number
};

TextWithClearButtonFilter.defaultProps = {
  delay: 2000
};

export function getTextWithClearButtonFilter(filterHandler, customFilterParameters) {
  return (
    <TextWithClearButtonFilter filterHandler={filterHandler} />
  );
}

并以这种方式使用

<TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getTextWithClearButtonFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>

React bootstrap table 是否提供带有清除按钮的 header TextFilter？

Is React bootstrap table provide header TextFilter with clear button?

twitter-bootstrap

reactjs

react-bootstrap

react-bootstrap-table