Question

我创建了一个表，该表已经填充了一些数据。现在，我要根据下拉值中的选择来过滤表中的结果。我该如何在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>

Answer 1

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

Answer 2

您可以在我的仓库中找到示例代码，请在 development 分支中检查代码。

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

它已经过细化并更新为官方文本的功能组件版本，您可以在此处进行检查：

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

首要地，您需要这样做：

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

所以table和dropdown的父对象将是有状态组件，而table和dropdown则是功能组件，从父对象的状态接收道具

根据下拉选择过滤表数据React

2 个答案: