Javascript 下拉选择上的筛选表数据

我已经创建了一个表，其中已经填充了一些数据。现在，我想根据下拉值中的选择筛选表中的结果。我怎样才能在反应中做到这一点？是否有人可以指导或提供示例代码来展示结果

下面是我的代码示例：

下拉列表：

 <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>

受审核方
挑选
{this.renderAuditee（）}
中小企业
挑选
{this.renderSME（）}
年
挑选
{this.renderYear（）}

表中的数据：

  <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>

复习2
项目ID
项目名称
中小企业
审核员
EEECPM
世界区
国家
财政年度
财政年度
回顾1日期
Obs的数量。
总建议。
接受建议。
{
filteredData.length？this.renderTableData（filteredData）：this.renderTableData（data）
}

由于组件在每次状态更改时都会重新读取，因此您应该将Filteredata置于一种状态，并在每次单击filter下拉列表时通过setState使用筛选数据更新此状态。更多的代码将有所帮助。我无法在此处进行评论，因此在这里回答

由于每次状态更改时都会重新描述组件，因此您应该将Filteredata置于一种状态，并在每次单击filter下拉列表时通过setState使用筛选数据更新此状态。更多的代码将有所帮助。我无法发表评论，因此在此回答

您可以在我的回购协议中获得一个示例代码，请在开发分支中查看代码

它经过了一点改进并更新为官方文本的功能组件版本，您可以在此处查看：

首先，您需要这样做：

在上方、表格和下拉列表中创建父组件

选择下拉列表时，更新父组件的状态

将过滤器和表格数据的值作为道具传递到表格组件中

---

因此，表和下拉列表的父级将是有状态组件，而表和下拉列表将是功能组件，从父级状态接收道具

您可以在我的回购中获得示例代码，请检查开发分支中的代码

它经过了一点改进并更新为官方文本的功能组件版本，您可以在此处查看：

首先，您需要这样做：

在上方、表格和下拉列表中创建父组件

选择下拉列表时，更新父组件的状态

将过滤器和表格数据的值作为道具传递到表格组件中

所以table和dropdown的父级将是一个有状态的组件，table和dropdown将是功能组件，从父级的状态接收道具