Reactjs react引导表：通过从另一个组件单击以编程方式进行筛选

我正在使用react引导表组件，并希望通过单击另一个组件中的按钮以编程方式筛选列

我遵循了中的编程选择过滤器示例，但没有设法调整它，以便其他组件中的按钮可以控制过滤器

当我调用this.refs.nameCol.applyFilter1时；单击后，我收到以下错误消息：

未捕获的TypeError:无法读取未定义的属性“applyFilter”

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

此处的测试示例：

风险值数据=[ {id:1，名称：项目名称1，质量：坏}， {id:2，名称：项目名称2，质量：良好}， {id:3，名称：项目名称3，质量：未知}， {id:4，名称：项目名称4，质量：良好}， {id:5，名称：项目名称5，质量：良好}， {id:6，名称：项目名称6，质量：不好} ]; 常量质量类型={ ‘好’：‘好’， ‘坏’：‘坏’， “未知”：“未知” }; 函数enumFormattercell、行、enumObject{ 返回枚举对象[单元格]； } var FilterBtn=React.createClass{ 把手点击：功能{ this.refs.nameCol.applyFilter1；//无法读取未定义的属性“applyFilter” }, 渲染：函数{ 回来 单击以应用“选择过滤器” ; } }; var BigTable=React.createClass{ 渲染：函数{ 回来 产品ID 品名 产品质量 ; } }; ReactDOM.render , document.querySelectorcontainer ;

---

我用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")
);

---

你是对的，我没有在applyFilter函数中传递正确的参数，但这并不是在那里添加props和state init时应用于实现解决方案的唯一更改。非常感谢！然而，我注意到过滤器按钮仅在第一次单击时起作用。如果单击按钮，则从下拉列表中选择另一个选项，再次单击按钮不会将过滤器恢复为“良好”。我发现这是因为ifthis.props.applyFilter！==nextrops.applyFilter条件。删除此条件修复了该问题。你能解释一下为什么SatyaDash有必要这样做吗？基本上这是因为componentWillReceiveProps将被多次调用，但我们需要在它为真时再次渲染。因此，您仍然可以删除该检查。