リアクションブートストラップテーブルには、クリアボタン付きのヘッダーTextFilterがありますか？

Question

react-bootstrap-tableを使用して、表の行と列の形式でデータを表示しています。

Iは、クリアボタンを有するヘッダ・フィルタ・オプションを使用してデータをフィルタする一つの要件を持っています。この

<TableHeaderColumn dataField='member' filter={ { type: 'TextFilter', 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> 

を使用します