javascript - React 待办事项列表 - 如何使过滤器发挥作用

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 标签中获取过滤器的值，然后使用它来过滤列表中的待办事项。但目前，我只是想获取过滤器的值，那么我该怎么做呢？

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>