【发布时间】：2020-05-12 14:49:57
【问题描述】：
我尝试在响应中创建表格中的搜索和排序功能。我的搜索功能运行良好。但是当我尝试将排序功能添加到表格中时，整个功能就会变得混乱。对于搜索，我使用搜索文本框，而对于排序，我使用选择下拉菜单。根据保存在 JSON 文件中的“answerStatus”键进行排序。
实时代码示例（https://x1juu.csb.app/）。不包括 CSS。
这是我的表格组件代码
import InquiresList from '../dashboard/inquiries/InquiriesList.json';
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())){
if(this.state.answerStatus === 'all')
{
return data;
}
else{
if(this.state.answerStatus === data.answerStatus)
{
return data;
}
}
}
return null;
})
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;
请帮忙。
【问题讨论】：
-
可以分享一下sn-p吗？
-
我在问题中添加了代码sn-p。
-
我已经看过你提供的 sn-p 并且我已经发布了工作代码 sn-p 作为答案。
标签： reactjs typescript react-table