React.js项目图片无法显示及任务状态筛选功能实现问题咨询

1. x.png无法显示修复 #

原因是src目录下的静态资源不能直接在img标签的src属性里写相对路径引用，React打包时不会识别这类相对路径，两种修复方法可选：

方法一：导入资源后使用（推荐） #

在Item.js顶部添加图片导入语句：

import xIcon from './img/x.png'

然后修改img标签为：

<img src={xIcon} className="todo-app__item-x" alt="删除"/>

方法二：将静态资源移动到public目录 #

把x.png移动到public/img/路径下，再修改img标签为：

<img src="/img/x.png" className="todo-app__item-x" alt="删除"/>

2. 任务过滤功能实现 #

第一步：新增过滤状态字段 #

修改App.js中constructor的state定义：

this.state={
  tasks: [],
  filter: 'all' // 可选值：all/active/completed，分别对应全部/未完成/已完成
}

第二步：添加过滤状态切换方法 #

在App.js中添加方法：

setFilter = (filterType) => {
  this.setState({ filter: filterType })
}

第三步：给底部按钮绑定点击事件 #

修改底部三个按钮的代码：

<ul className="todo-app__view-buttons">
  <button onClick={() => this.setFilter('all')}>All</button>
  <button onClick={() => this.setFilter('active')}>Active</button>
  <button onClick={() => this.setFilter('completed')}>Complete</button>
</ul>

第四步：渲染前过滤任务列表 #

在App.js的render方法开头先获取过滤后的任务：

render(){
  // 新增以下代码
  const filteredTasks = this.state.tasks.filter(task => {
    if(this.state.filter === 'active') return !task.completed
    if(this.state.filter === 'completed') return task.completed
    return true
  })
  // 原有其他代码
  ...

再修改原有任务渲染的map逻辑，改用过滤后的列表：

{filteredTasks.map((item, index) => 
  <Item 
    num={index} 
    text={item.content} 
    completed={item.completed} 
    onClick={() => this.handleClick(index)}
  />
)}

额外优化：map方法第二个参数直接返回当前项的索引，比调用indexOf性能更好，建议替换使用。

内容的提问来源于stack exchange，提问作者jerry