2

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

我遵循了react-bootstrap-table 示例列表中的Programmatically Select Filter示例，但没有设法对其进行调整，因此来自其他组件的按钮可以控制过滤器。

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

未捕获的类型错误：无法读取未定义的属性“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/

希望这可以帮助。

4

1 回答 1

4

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

问题是您提到了选择选项字典，并且在应用过滤器时传递了不同的参数。因此，如果您想在单击按钮时选择好，则需要在 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")
);
于 2017-02-06T18:10:39.253 回答