React bootstrap table이 헤더 TextFilter에 clear 버튼을 제공합니까?

Question

테이블 행 - 열 형식으로 데이터를 표시하려면 react-bootstrap-table을 사용하고 있습니다.

클리어 버튼으로 헤더 필터 옵션을 사용하여 데이터를 필터링하는 요구 사항이 하나 있습니다. 이

<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> 

를 사용하여