Question

我在我的应用程序中使用React我有表格，我想按Male或Female过滤性别。我想过滤性别，以便在可能的情况下按员工的性别进行搜索。

+++++ IM对编程来说是全新的

export default class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    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>
      );
    });
  }
  render() {
    return (
      <div>
        <table 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工作流程

function RenderEmployees(props: Employee[]) {

    const [sexe, setSexe] = useState('male');
    renderEmployeesListItems = () => {
       props.filter((employee: Employee)=> employee.sexe === sexe)
       .map((employee)=>
         <tr>
            <td>{employee.name}</td>
            <td>{employee.email}</td>
            <td>{employee.age}</td>
            <td>{employee.gender}</td> // who egal with sexe
            <td>{employee.city}</td>
            <td></td>
            <td></td>
        </tr>
        )
    }

    return (
        <div>
            <div>
                 <h2>Filter</h2>
                 <button onClick={setSexe('male')}>
                      Male
                 </button>
                 <button onClick={setSexe('female')}>
                      Female
                </button>
            </div>
            <table className="employeeTable" id="myTable">
            <tbody>
            <tr>
                <th>NAME</th>
                <th>EMAIL</th>
                <th>AGE</th>
                <th>GENDER</th>
                <th>CITY</th>
                <th></th>
                <th></th>
            </tr>
                    {renderEmployeesListItems()}
            </tbody>
            </table>      
        </div>
    );
}

如何使用reactJS进行过滤？

1 个答案: