在下拉选择中过滤表数据 React答案

【问题标题】：Filter table data on dropdown selection React在下拉选择中过滤表数据 React
【发布时间】：2019-07-04 21:25:42
【问题描述】：

我创建了一个已经由一些数据填充的表。现在我想根据下拉值中的选择过滤表中的结果。我怎么能在 React 中做到这一点？有人可以指导或提供示例代码来展示结果吗？

下面是我的代码示例：

下拉菜单：

 <table>
                <tbody>
                    <tr> <td>
                        <label className="col-form-label"> Auditee </label> </td>
                        <td className="td-padding td-space">
                            <select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
                            <option>Select</option>
                            {this.renderAuditee()}
                            </select>
                        </td>

                        <td> <label className="col-form-label lbl-space"> SME </label></td>
                        <td className="td-padding">
                            <select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
                            <option>Select</option>
                            {this.renderSME()}
                            </select>
                        </td>

                        <td> <label className="col-form-label lbl-space"> Year </label></td>
                        <td className="td-padding">
                            <select className="form-control dpwidth" name="Year" onChange={this.handlePeriodChange.bind(this,this)} disabled={this.state.isChecked}>
                            <option>Select</option>
                            {this.renderYear()}
                            </select>
                        </td>
</tr>
</tbody>
</table>

表格中的数据：

  <table className="table table-striped table-highlight">
            <span className="head">Review2</span>
          <tbody>
          <tr>
            <th> Project ID </th>
            <th> Project Name </th>
            <th> SME </th>
            <th> Auditor </th>
            <th> EEECPM</th>
            <th> WorldArea </th>
            <th> Country </th>
            <th> FY Year </th>
            <th> FY Period </th>
            <th> Review1 Date </th>
            <th> No. of Obs. </th>
            <th> Total Recom. </th>
            <th> Accepted Recom.</th>
            </tr>
             {
               filteredData.length? this.renderTableData(filteredData) : this.renderTableData(data) 
             }
          </tbody>
        </table>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

由于每次状态更改都会重新渲染组件，因此您应该将过滤数据置于一个状态，并在每次单击过滤器下拉菜单时通过 setState 使用过滤数据更新此状态。更多代码会有所帮助。我无法发表评论，所以在这里回答

【讨论】：

【解决方案2】：

您可以在我的 repo 中有示例代码，请查看 development 分支中的代码。

https://github.com/upretim/react-data-filter

稍微细化并更新为官方文本的功能组件版本，您可以在这里查看：

https://reactjs.org/docs/thinking-in-react.html

主要你需要这样做：

在上方、表格和下拉菜单中创建父组件。
选择下拉菜单时更新父组件的状态。
在表格组件中将过滤器和表格数据的值作为 prop 传递。

所以 table 和 dropdown 的 parent 将是一个有状态的组件，而 table 和 dropdown 将是功能组件，从 parent 的 state 接收 props

【讨论】：