在 React table 中使用 select 下拉列表过滤数据

Question

我尝试在 select 下拉列表的帮助下使用 table 值之一过滤 table 的数据。我使用 JSON 导入所有 table 数据。我以某种方式编写了一些代码来过滤数据，但它没有用。请帮忙。我想要的是当用户 select 'answered' 具有回答值的选项数据显示而其他隐藏时，反之亦然。这是 same(https://lndnf.csb.app/).

的沙箱 link

这里是 table 组件代码。

 class Inquiry extends React.Component{
     constructor(props)
     {
        super(props);
         this.state={
             searchInquiries:null,
             answerStatus:'all'

         }
     }
     handleSearch=(event) =>
     {
       this.setState({searchInquiries:event.target.value});
     }
     handleAnswer=(event) =>
     {
         this.setState({answerStatus:event.target.value});
     }
     render()
     {
        const inquiries = InquiresList.filter((data)=>{
            if(this.state.searchInquiries == null)
            {
                return data;
            }
            else if(data.user_code.toLowerCase().includes(this.state.searchInquiries.toLowerCase())){
                        return data;
                }
            return null;
          })
          inquiries.filter((data) =>
          {
              if(this.state.answerStatus.toLowerCase() === 'all')
              {
                  return data;
              }
              else if(data.answered.toLowerCase()=== 'answered' && this.state.answerStatus.toLowerCase() === 'answered')
              {
                  return data;
              }
              else if(data.answered.toLowerCase()=== 'unanswered' && this.state.answerStatus.toLowerCase() === 'unanswered')
              {
                  return data;
              }
          })
         return(
            <div className="col-md-12 bg-gray" style={{padding:'30px'}}>
                <div className="row" style={row}>
                <h3 className="roboto paragraph mgb-30">Inquiries List</h3>
                </div>
                <div className="row border-radius-10 default-shadow" style={row}>
                <div className="col-md-12 bg-white border-radius-10" style={padding}>
                    <div className="row">
                    <div className="col-md-6 flex all-center">
                    <i className="i fa fa-search table-search-icon"></i>
                        <input type="text" onChange={this.handleSearch} className="form-control" style={{borderRadius:'30px'}} placeholder="Search" />
                    </div>
                    <div className="col-md-6 flex flex-end" style={row}>
            <select name="inquiry-filter" onChange={this.handleAnswer} className="inquiry-filter">
                <option value="all">All</option>
                <option value="answered">Answered</option>
                <option value="unanswered">Unanswered</option>
            </select>
            </div>
                    </div>

                </div>
                <div className="col-md-12 bg-white" style={{padding:'0px'}}>
                    <table className="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <td><p className="paragraph" style={marginBottom}>Created</p></td>
                                <td><p className="paragraph" style={marginBottom}>User Code</p></td>
                                <td><p className="paragraph" style={marginBottom}>Email</p></td>
                                <td><p className="paragraph" style={marginBottom}>Subject</p></td>
                                <td><p className="paragraph" style={marginBottom}>Answer</p></td>
                            </tr>
                        </thead>
                        <tbody>

                        {
                    inquiries.map(inquiry =>(
                        <tr>

                        <td>
                            <h3 className="paragraph">{inquiry.created_date}</h3>
                        </td>
                        <td>
                            <h3 className="paragraph" style={marginBottom}>{inquiry.user_code}</h3>

                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{inquiry.email}</p>
                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{inquiry.subject}</p>
                        </td>

                         <td>
                         <div className="custom-control custom-checkbox">
                             {
                              inquiry.answered ?   <input type="checkbox" checked className="custom-control-input" id={"answer-status-"+inquiry.id} name={"answer-status-"+inquiry.id} />
                              : <input type="checkbox" className="custom-control-input" id={"answer-status-"+inquiry.id} name={"answer-status-"+inquiry.id} /> 
                              }
                           <label className="custom-control-label" for={"answer-status-"+inquiry.id}></label>
                         </div>
                         </td>
                         </tr>

                    ))
                }

                        </tbody>
                    </table>
                </div>

            </div>
            </div>

         )
     }

 }


 export default Inquiry;

Answer 1

我想你 终于错过了 assinged 过滤数据 :

var inquiries = InquiresList.filter((data)=>{
              // your code for filter
          });

// filter will not modify the existing array, it returns updated array
// so you need to assign it, to get updated values
inquiries = inquiries.filter((data) =>  // <----------- HERE
{
     // your code for filter
})

工作演示：

在 React table 中使用 select 下拉列表过滤数据

Filter data using select dropdown in react table

typescript

reactjs

react-table