Javascript table 年龄范围过滤器

Question

我创建了一个包含员工信息的 table。我想通过 gender 和 age 过滤 table。我为 gender 创建过滤器，但为 age 创建过滤器。我很难找到解决方案。例如，我想做的过滤器是找到两个数字之间的员工，比如所有年龄在 23 到 30 岁之间的员工。这是我的代码。

export default class EmployeeList extends React.Component {
  constructor() {
    super();
    this.state = {
      employees: []
    };
  }
  componentDidMount() {
    this.employeesTracker = Tracker.autorun(() => {
      // Meteor.subscribe('employees');
      const employees = Employees.find().fetch();
      this.setState({ employees });
    });
  }

  componentWillUnmount() {
    this.employeesTracker.stop();
  }

  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>
          <td><Link className="link button" to={`/employee-detail/${employee._id}`}>EDIT</Link></td>
          <td><button className="button pointer" onClick={() => Employees.remove({_id: employee._id})}>DELETE</button></td>
        </tr>
      );
    });
  }
  // --------------------------
  //Gender Filter
   myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("genName").value;
    filter = input;
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[3];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }       
    }
  }



  render() {
    return (
      <div>
        <select id="genName" onChange={this.myFunction.bind(this)}>
          <option value="">All Genders</option>
          <option value="M">Male</option>
          <option value="F">Female</option>
        </select>
        <p>Minimum age:</p>
            <input type="text" id="min" name="min"/>
        <p>Maximum age:</p>
            <input type="text" id="max" name="max"/>
        <table id="myTable" className="employeeTable">
          <tbody>
          <tr>
            <th>NAME</th>
            <th>EMAIL</th>
            <th>AGE</th>
            <th>GENDER</th>
            <th>CITY</th>
            <th></th>
            <th></th>
          </tr>
            {this.renderEmployeesListItems()}
          </tbody>
        </table>
      </div>
    );
  }
}

Answer 1

要在用户输入数据时进行这种过滤，您应该使用 React State, and the best way to integrate it today is using hooks。

状态下，你不会像你那样存储employees（这只是一个minimongo查询获取整个数据库的结果），而是employeesToDisplay。这将避免在 myFunction.

中进行 Html 解析

在使用状态进行一些 linting 之后，您的代码应该如下所示：

//Gender Filter
myFunction() {
  var filter = document.getElementById("genName").value;
  // best is to get the input from context (look into `this` with console.log here)

  // assuming that filter is exactly what you are looking for in your database : 
  this.setState({
     employeesToDisplay: Employees.find({gender: filter}).fetch()
  })
}

由于状态是反应性的，您的列表将在选择性别时更新，并呈现与查询相对应的数据库元素。

要查询员工的年龄，请参考 the mongoDB documentation on queries 构建如下请求： Employees.find({age: {$gte: minAge, $lte: maxAge}}).fetch() 您将用于存储要在状态中显示的数据

Javascript table 年龄范围过滤器

Javascript table age range filter

javascript

meteor