如何在两个年龄之间的表格中搜索答案

【问题标题】：How to search in the table between two age如何在两个年龄之间的表格中搜索
【发布时间】：2019-12-27 08:22:30
【问题描述】：

我有一个显示员工信息的表格。我想添加一个搜索以显示我放入最小文本框和最大文本框的特定数字之间的所有员工。这是我的表格代码。

constructor() {
    super();
    this.state = {
      employees: []
    };
  }
  componentDidMount() {
    this.employeesTracker = Tracker.autorun(() => {
      const employees = Employees.find().fetch();
      this.setState({ employees });
    });
  }

  renderEmployeesListItems() {
    return this.state.employees.map(employee => {
      return (
        <tr key={employee._id}>
          <td>{employee.name}</td>
          <td>{employee.email}</td>
          <td>{employee.age}</td>
          <td>{employee.gender}</td>
          <td>{employee.city}</td>
        </tr>
      );
    });
  }

我在这里渲染我的应用程序：

render() {
    return (
      <div>
          <input type="text" id="min" name="min"/>
          <input type="text" id="max" name="max"/>
          <button onClick={this.ageFilter.bind(this)}>filter</button>
        <table id="myTable">
          <tbody>
            {this.renderEmployeesListItems()}
          </tbody>
        </table>
      </div>
    );
  }

【问题讨论】：

标签： javascript reactjs mongodb meteor

【解决方案1】：

您需要使用 && (AND) 运算符而不是 || (OR)

...

var age = parseInt(td.innerHTML)
if (age > filterMin && age < filterMax) {
  ...
} else {
  ...
}

也不知道为什么要通过document. 访问数据。这不是在反应中进行文档更新的方法。

【讨论】：

你能分享比“没用”更多的信息吗？如果有的话，它抛出了什么错误？你从parseInt(td.innerHTML)得到正确的age吗？

【解决方案2】：

您可以将此过滤后的数据单独作为状态变量filteredEmployee 等。那么过滤函数就是，

ageFilter = () => {
   const { employees, min, max } = this.state;
   const filteredEmployees = employees.filter(employee => min < employee.age && employee.age < max);
   this.setState({ filteredEmployees })
}

如果需要，您还需要添加逻辑来清除过滤器。在renderEmployeesListItems 函数中使用这个filteredEmployees 而不是employees

【讨论】：