时间戳

首页 > 解决方案 > 在 react js 表中输入提前搜索

reactjs - 在 react js 表中输入提前搜索

问题描述

我有一张桌子，就像

<UserTabel dataList={this.props.dataList} />

和 

<div className="table-responsive">
        <table className="table table-hover" id="job-table">
          <thead>
            <tr className="text-center">
              <th scope="col" className="wc-30">Sr.No.</th>
              <th scope="col">Company Name</th>
              <th scope="col">Technology</th>
              <th scope="col">Title</th>
            </tr>
          </thead>
          <tbody className="text-center">
            {this.props.data && this.props.dataList.content && this.props.dataList.content.length > 0 && this.props.dataList.content.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {
              return (
                <tr key={key}>
                  <td className="font-weight-bold wc-30">{key + 1}</td>
                  <td>{item.technology}</td>
                  <td className="font-weight-bold">17</td>
                  <td title={item.title} className="jd-name-container justify-content-center align-items-center">
                    <div className="jdName">{item.jdName}</div>
                    {(key + 1 === 1) && <div className="badge new-badge badge-warning-custom">New</div>}
                  </td>
                  <td className="font-weight-bold">30</td>
                  <td className="font-weight-bold">30</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    )

现在我拥有的数据就是这种格式。

this.props.datalist = {
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]
}

现在，在这个现在，我有一个输入框，

 <input type="text"
                id="searchJob"
                className="form-control-sm border-0 flex-grow-1"
                placeholder="Company Name / Technology / Job title" />
              <i className="fa fa-search search-job"></i>
            </div>

现在，我在这里尝试的是，一旦用户输入此内容onChange，我需要dataList在两个条件中进行搜索Title and Technology，然后我需要仅向用户显示该行。

那么，有什么方法可以做到这一点吗？

提前致谢。任何事情都会有帮助

标签： reactjsreduxreact-redux

解决方案

您可以做的是创建一个类似 getDataList() 的函数，用于过滤给定条件的数据。然后条件可以使用您输入的文本。最后，使用 created 函数为您的表填充数据。

constructor(props) {
  super(props);
  this.state = {enteredText: null};
}

function onChange(newText) {
  this.setState({enteredText: newText});
} 

function getDataList() {
  return this.props.datalist.content.filter(c => (c.title === this.state.enteredText || c.technology === this.state.enteredText));
}

推荐阅读