fix #751

packages/react-bootstrap-table2-toolkit/context.js

@@ -46,6 +46,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
       searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
     };
     this._ = null;
+    this.onClear = this.onClear.bind(this);
     this.onSearch = this.onSearch.bind(this);
     this.setDependencyModules = this.setDependencyModules.bind(this);
   }
@@ -56,6 +57,10 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     }
   }
 
+  onClear() {
+    this.setState({ searchText: '' });
+  }
+
   /**
    * 
    * @param {*} _ 
@@ -87,7 +92,8 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
       <ToolkitContext.Provider value={ {
         searchProps: {
           searchText: this.state.searchText,
-          onSearch: this.onSearch
+          onSearch: this.onSearch,
+          onClear: this.onClear
         },
         csvProps: {
           onExport: this.handleExportCSV

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -26,33 +26,51 @@ const handleDebounce = (func, wait, immediate) => {
   };
 };
 
-const SearchBar = ({
-  delay,
-  onSearch,
-  className,
-  style,
-  placeholder,
-  searchText,
-  ...rest
-}) => {
-  let input;
-  const debounceCallback = handleDebounce(() => {
-    onSearch(input.value);
-  }, delay);
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.searchText
+    };
+  }
 
-  return (
-    <input
-      ref={ n => input = n }
-      type="text"
-      style={ style }
-      onKeyUp={ () => debounceCallback() }
-      className={ `form-control ${className}` }
-      defaultValue={ searchText }
-      placeholder={ placeholder || SearchBar.defaultProps.placeholder }
-      { ...rest }
-    />
-  );
-};
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: nextProps.searchText });
+  }
+
+  onChangeValue = (e) => {
+    this.setState({ value: e.target.value });
+  }
+
+  onKeyup = () => {
+    const { delay, onSearch } = this.props;
+    const debounceCallback = handleDebounce(() => {
+      onSearch(this.input.value);
+    }, delay);
+    debounceCallback();
+  }
+
+  render() {
+    const {
+      className,
+      style,
+      placeholder
+    } = this.props;
+
+    return (
+      <input
+        ref={ n => this.input = n }
+        type="text"
+        style={ style }
+        onKeyUp={ () => this.onKeyup() }
+        onChange={ this.onChangeValue }
+        className={ `form-control ${className}` }
+        value={ this.state.value }
+        placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+      />
+    );
+  }
+}
 
 SearchBar.propTypes = {
   onSearch: PropTypes.func.isRequired,

packages/react-bootstrap-table2-toolkit/src/search/clear-button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ClearButton = ({
+  onClear,
+  text
+}) => (
+  <button className="btn btn-default" onClick={ onClear }>{ text }</button>
+);
+
+ClearButton.propTypes = {
+  onClear: PropTypes.func.isRequired,
+  text: PropTypes.string
+};
+
+ClearButton.defaultProps = {
+  text: 'Clear'
+};
+
+export default ClearButton;

packages/react-bootstrap-table2-toolkit/src/search/index.js

@@ -1,3 +1,4 @@
 import SearchBar from './SearchBar';
+import ClearSearchButton from './clear-button';
 
-export default { SearchBar };
+export default { SearchBar, ClearSearchButton };