Question

我有一个类似

的表格

<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，然后我需要显示仅向用户显示该行。

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

先谢谢了。任何事情都会有所帮助

Answer 1

您可以做的是创建一个类似getDataList（）的函数，该函数将过滤给定条件的数据。然后，条件可以使用您输入的Text。最后，使用创建的函数填充表中的数据。

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));
}

在react js表中输入预先搜索

1 个答案: