React实现Todolist

最新推荐文章于 2024-09-17 22:37:54 发布

画一生情入颜容

最新推荐文章于 2024-09-17 22:37:54 发布

阅读量9.6k

点赞数 4

分类专栏： react todolist 原创文章标签： react todolist

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/88571931

版权

本文详细介绍了如何使用React实现一个TodoList应用。内容包括：1) 创建ListItem组件，遍历并渲染列表项；2) 通过state管理和事件处理实现勾选任务及文字删除线效果；3) 子组件通过props向父组件传递数据，实现删除任务功能；4) 在父组件中处理添加任务，通过更新state添加新条目。文章提供了完整的代码示例链接。

摘要由CSDN通过智能技术生成

在这里插入图片描述
一个todolist基本的功能点包括：

点击复选框标记完成或者未完成，且相应的文字出现删除线
从列表中移除item
添加item

首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。
创建一个ListItem组件。含有一个render方法

class ListItem extends Component {
  render() {
    return (
      <ul>
        {
          this.props.data.map(element => {
            return (
              <li className="listItem" key={element.name}>
                <input type="checkbox"/>
                <span>{element.name}</span>
                <button className="delete">删除</button>
              </li>
             )
        })
      }
    </ul>
   )
  }
 }
 export default ListItem

this.props.data是父组件传下来的一个list。遍历该list的每一项渲染出来。（注：上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。）
此时一个todo的list组件就封装好了，export default出去，让需要的去组件使用。

在父组件TodoList中使用该ListItem组件。

import ListItem from './ListItem'
class TodoList extends Component {
  render() {
    return (
      <div className="reactTodoList">
      	<header className="header">React todo list</header>
      	<ListItem data={this.state.list} />