我在我的应用程序中使用React我有表格我想按男性或女性过滤性别。我想对性别进行过滤,以便可以按性别搜索员工。
+++++ 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>
);
}
}
最佳答案
嘿,您应该使用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>
);
}
关于javascript - 如何使用reactJS进行过滤?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57573314/