Question

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

我按照react-bootstrap-table examples list中的以编程方式选择过滤器示例，但未设法对其进行调整，以便其他组件中的按钮可以控制过滤器。

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

未捕获的TypeError：无法读取未定义的属性'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];
}

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的帮助，这已得到解决。

更新了小提琴：https://jsfiddle.net/0ydcgy9g/

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

小提琴：https://jsfiddle.net/d1qhfm50/5/

希望这有帮助。

Answer 1

我在ES6中编写了你的程序。找到下面的代码。

问题是你提到选择选项字典作为一些东西，并且在应用过滤器时你传递的是不同的参数。所以如果你想选择好按钮点击，那么需要传递好的＆＃39;在applyFilter函数中。

(ctrl+m)(ctrl+j)

react-bootstrap-table：通过单击另一个组件

1 个答案: