Question

handleFilters(filter){
   console.log(filter);
}

render(){
   return(
       <div>
          <a href="#" filter="show_all" onClick={this.handleFilters}>All</a>
          {'  '}
          <a href="#" filter="show_active">Active</a>
          {'  '}
          <a href="#" filter="show_completed">Completed</a>
     </div>

我正在制作一个待办事项应用程序，并且它也正常工作，但我在添加过滤器时遇到了一些问题，我可以显示所有待办事项，活动待办事项或已完成的待办事项。

我现在要做的是从a href标签中获取filter的值，然后使用它来过滤列表中的todo项。但此刻，我只是试图获得过滤器的价值，那我该怎么做呢？

Answer 1

您可以避免像这样存储DOM中的数据

const match = filter => () => this.handleFilters(filter)
<div>
          <a href="#" onClick={match('show_all')}>All</a>
          {'  '}
          <a href="#" onClick={match('show_active')}>Active</a>
          {'  '}
          <a href="#" onClick={match('show_completed')}>Completed</a>
     </div>

Answer 2

handleFiltersShowActive(){ 
     const tds = this.props.todos.foreach(todo => 
    if(!todo.isCompleted) 
    Displaytodolist.push(todo);
    );
    this.setState(displaytodo: tds);
    } 
    render(){ 
    {todos} = this.props;
    Let display = this.state.displaytodo.foreach( todo => 
visiblelist.push (
<div> {todo.title} </div>
);
);
    return( 
    <div> <a href="#" filter="show_all" onClick={this.handleFilters}>All</a> {' '}
     <a href="#" filter="show_active" onClick={this.handleFiltersShowActive}>Active</a> {' '}
     <a href="#" filter="show_completed">Completed</a> </div>

{display}
    )};

试一试。

反应待办事项列表 - 如何使过滤器工作

2 个答案: