react-bootstrap-table：通过点击另一个组件以编程方式进行过滤

Question

我正在使用 react-bootstrap-table 组件，并希望通过单击另一个组件的按钮以编程方式过滤列。

我遵循了程序化Select过滤器示例react-bootstrap-table examples list但是没能适应它所以其他组件的按钮可以控制过滤器。

当我在单击时调用 this.refs.nameCol.applyFilter(1); 时，我收到以下错误消息：

Uncaught TypeError: Cannot read property 'applyFilter' of undefined

主要问题是：解决这个问题的最佳方法是什么？

此处测试示例：

var data = [
  {id : "1", name : "Item name 1", quality : "bad"},
  {id : "2", name : "Item name 2", quality : "good"},
  {id : "3", name : "Item name 3", quality : "unknown"},
  {id : "4", name : "Item name 4", quality : "good"},
  {id : "5", name : "Item name 5", quality : "good"},
  {id : "6", name : "Item name 6", quality : "bad"}
];

const qualityType = {
  'good': 'good',
  'bad': 'bad',
  'unknown': 'unknown'
};

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

var FilterBtn = React.createClass({  
  handleBtnClick: function(e) {
    this.refs.nameCol.applyFilter(1); // Cannot read property 'applyFilter' of undefined
  },
  render: function() {
    return (
      <button onClick={ this.handleBtnClick } className='btn btn-default'>Click to apply select filter</button>
    );
  }
});

var BigTable = React.createClass({  
    render: function() {
        return (
          <div>
            <BootstrapTable data={ data }>
                <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
                <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                <TableHeaderColumn ref='nameCol' dataField='quality' filterFormatted dataFormat={ enumFormatter }
                  formatExtraData={ qualityType } filter={ { type: 'SelectFilter', options: qualityType } }>Product Quality</TableHeaderColumn>
            </BootstrapTable>
          </div>
        );
      }
  });

ReactDOM.render(
  <div>
    <FilterBtn/>
    <BigTable/>
  </div>,
  document.querySelector("#container")
);

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div id="container"></div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
  
</body>
</html>

非常感谢您的帮助！

====================================== ===============================

更新

感谢@SatyaDash 的帮助，此问题已得到解决。

已更新 fiddle：https://jsfiddle.net/0ydcgy9g/

对于那些感兴趣的人，我还应用这种方法以编程方式过滤列，这次是从另一个组件的 下拉列表 中选择一个选项。

Fiddle: https://jsfiddle.net/d1qhfm50/5/

希望这对您有所帮助。

Answer 1

我在 ES6.Find 下面的代码中写了你的程序。

问题是你提到了 select 选项字典，而在应用过滤器时你传递的是不同的 argument.So 如果你想 select 在按钮点击时好然后需要传递'good' 在 applyFilter 函数中。

        var data = [
      {id : "1", name : "Item name 1", quality : "bad"},
      {id : "2", name : "Item name 2", quality : "good"},
      {id : "3", name : "Item name 3", quality : "unknown"},
      {id : "4", name : "Item name 4", quality : "good"},
      {id : "5", name : "Item name 5", quality : "good"},
      {id : "6", name : "Item name 6", quality : "bad"}
    ];

    const qualityType = {
      'good': 'good',
      'bad': 'bad',
      'unknown': 'unknown'
    };

    function enumFormatter(cell, row, enumObject) {
      return enumObject[cell];
    }
class FilterBtn extends React.Component{
    constructor(){
    super();
    this.handleBtnClick = this.handleBtnClick.bind(this);
  }
    handleBtnClick(){
    this.props.callAF();
  }
  render(){
    return (
            <button 
                onClick={ this.handleBtnClick } 
        className='btn btn-default'>
        Click to apply select filter
            </button>
        );
  }
}
class BigTable extends React.Component{
    constructor(){
    super();
    this.state={
        data: data
    }
  }
  componentWillReceiveProps(nextProps){
    if(this.props.applyFilter !== nextProps.applyFilter){
        this.refs.nameCol.applyFilter('good');  
    }
  }
  render(){
    return(
            <div>
                <BootstrapTable data={data}>
                    <TableHeaderColumn 
            dataField='id' 
            isKey>
            Product ID
                    </TableHeaderColumn>
                    <TableHeaderColumn 
            dataField='name'>
            Product Name
                    </TableHeaderColumn>
                    <TableHeaderColumn 
            ref='nameCol' 
            dataField='quality' 
            filterFormatted 
            dataFormat={ enumFormatter }
                        formatExtraData={ qualityType } 
            filter={{ 
                type: 'SelectFilter', 
              options: qualityType 
                        }}>
            Product Quality
                    </TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
  }
}
class MainClass extends React.Component{
    constructor(){
    super();
    this.state = {
        applyFilter : false
    }
    this.callAFF = this.callAFF.bind(this);
  }
  callAFF(){
    this.setState({
        applyFilter: true
    });
  }
  render(){
    return (
        <div>
        <FilterBtn 
            callAF={
                this.callAFF
            }/>
         <BigTable
            applyFilter={this.state.applyFilter}/>
      </div>
    );
  }
}
ReactDOM.render(
    <MainClass/>,
    document.querySelector("#container")
);

react-bootstrap-table：通过点击另一个组件以编程方式进行过滤

react-bootstrap-table: Programmatically filter by clicking from another component

reactjs

react-bootstrap-table