在React中创建一个简单的Todo应用

免责声明

这篇文章包含产品的会员链接。 对于通过这些链接进行的购买，我们可能会收到佣金。

本月课程：

A）初学者：完整的React Web开发人员课程（使用Redux）。 [7,378推荐，4.7 / 5星]

B）高级：从头开始使用React，Redux和Firestore构建应用。[1,751 建议，4.7 / 5星]

如说明所述，修改App.js进行更改。 App.js从index.js文件呈现。将App.js视为所有其他组件的容器。

体验下面的ToDo应用。在输入框中输入任务，单击添加按钮以添加到列表。要从列表中删除，请单击要删除的待办事项。

转到src的App.js文件。从返回中删除除父div之外的所有内容。看起来像下面

 从“反应”中导入React，{组件} 
 导入'./App.css' 
  App类扩展了组件{ 
  render（）{ 
 返回（

）
}
}
导出默认应用

所有组件将在此return语句中放入div。

创建用户界面

待办事项清单是表格，下面是您上面所经历的显示。

我们在src目录的TodoList.js文件内创建组件TodoList 。

我们将其导入到App.js中，以便将其放入我们正在讨论的div中。

另外，将TodoList放在div的return语句中。

TodoList中有什么？

 从“反应”中导入React，{组件} 
 类TodoList扩展了Component { 
  render（）{ 
 返回（ 
   
   
   
   
   
   
  
 
  
 
  ） 
  } 
  }

 导出默认的TodoList

您可能会认识到一些多余的div，不用担心我们会在一段时间内填充它们。

该组件创建表单。

看起来像这样…

由于CSS，您的输出将与我的输出不同。我秘密地将CSS添加到index.css文件中。这是基本内容，此后我们不再讨论样式表。如果您希望自己的应用风格如示例中所示，请从此处获取index.css…

如果您尝试在此应用中添加待办事项，它将重新加载页面。这是因为表单的默认行为是提交到同一页面。

让React Todo App焕然一新

我们已经有一个没有生气的待办事项应用程序，除了显示自己之外什么也没有做。

这是我们要做的：

新增项目
显示项目
移除物品

新增项目

提交表单时，将提交输入项。要处理此操作，请在TodoList中将onSubmit添加到form标签。

此addItem应该在App组件上处理。它作为道具传递给其他组件。

必须存在于App中才能通过。在App创建一个addItem属性。

我们可以将其声明为类似于JavaScript（ES5）的旧函数，但不会将表单与其绑定。我们必须通过构造函数手动绑定它。我将使用类似ES6的语法摆脱这种情况。

我们仍然需要状态来保存项目数组。状态使页面上的元素和呈现变得容易。当状态中的数据更改时，所有使用数据的组件都会自动更改。

我们还需要另一个称为currentItem状态，以将当前值保存在内存中。它是一个对象，并且还带有文本键。当内部有多个相似组件时，React内部使用此键来渲染组件。没有键就无法呈现待办事项列表，因为将存在所有内容。

向App添加一个构造函数。另外，将addItem和handleInput添加到相同的位置。

addItem管理添加到列表中，handleInput管理输入字段中的更改。

这就是我的App.js的样子……

 从“反应”中导入React，{组件} 
 导入'./App.css' 
 从'./TodoList'导入TodoList

  App类扩展了组件{ 
  constructor（）{ 
 超（） 
  this.sate = { 
 项目：[]， 
  currentItem：{text：“，key：''}， 
  } 
  } 
  handleInput = e => { 
  console.log（'Hello Input'） 
  } 
  addItem =（）=> { 
  console.log（'Hello Add Item'） 
  } 
  render（）{ 
 返回（ 
   
   
  
 
  ） 
  } 
  }

 导出默认应用

为了获得输入元素，我们必须有一种引用它的方法。您可能会对使用querySelector感到兴奋，但是React不喜欢这样。虽然完全有效，但虚拟DOM的想法不是直接与DOM交互，而是与DOM中的组件直接交互。

为了引用输入，我们使用inputElement =React.createRef()创建一个ref 。像addItem一样将其传递给TodoList

inputElement = {this.inputElement}

将其用作ref = {this.props.inputElement}中的ref = {this.props.inputElement} 。

如果您此时尝试使用该应用程序，则可以看到它记录了来自addItem的消息，然后重新加载。重新加载是表单提交的默认行为。

要停止此行为，请将addItem修改为以下内容。

  addItem = e => { 
  e.preventDefault（） 
  console.log（'Hello World'） 
  }

preventDefault将阻止重新加载提交表单。

这是我们传递给TodoList的所有数据…

  <TodoList 
  addItem = {this.addItem} 
  inputElement = {this.inputElement} 
  handleInput = {this.handleInput} 
  currentItem = {this.state.currentItem} 
  />

addItem处理单击添加。

inputElement引用此元素。

handleInput处理更改时输入字段上的数据

currentItem以显示设置为currentItem的状态的值。

这是我的TodoList.js的样子……

 从“反应”中导入React，{组件}

 类TodoList扩展了Component { 
  componentDidUpdate（）{ 
  this.props.inputElement.current.focus（） 
  } 
  render（）{ 
 返回（ 
   
   
   
  <输入 
  placeholder =“ Task” 
  ref = {this.props.inputElement} 
 值= {this.props.currentItem.text} 
  onChange = {this.props.handleInput} 
  /> 
   
   
  
 
  
 
  ） 
  } 
  }

 导出默认的TodoList

稍后我们将讨论eh ComponentDidUpdate …

提交form时，调用addItem

ref引用当前元素。

value以文本形式存储在currentElement对象中。

如果组件中没有onChange ，则该字段为只读。我们不想要这个。

onChange调用handleInput，接下来将进行讨论。

  handleInput = e => { 
  const itemText = e.target.value 
  const currentItem = {文本：itemText，键：Date.now（）} 
  this.setState（{ 
  currentItem， 
  }） 
  }

handleInput获取事件，它从输入框中获取值，并将状态设置为currentItem对象。它以键作为当前数据，以文本作为输入数据。关键是Date.now（），它是从1970年至今的毫秒数。每毫秒最多只能输入1个输入。对于我们的案例而言，这就足够了。

我们需要此对象，因为我们需要在用户提交表单时将此值存储到数组items 。

  addItem = e => { 
  e.preventDefault（） 
  const newItem = this.state.currentItem 
 如果（newItem.text！==''）{ 
  console.log（newItem） 
  const items = [... this.state.items，newItem] 
  this.setState（{ 
 项目：项目， 
  currentItem：{文本：“，键：”}， 
  }） 
  } 
  }

addItem防止默认重新加载。它从状态currentItem的输入框中获取值。

由于我们不想在待办事项中添加空值，因此我们进行了检查。如果不为空，则将newItem项数组并添加newItem 。

我们必须将此item []设置为状态，我们称之为this.setSate 。重置currentItem以清除输入框也很有意义。

ComponentDidUpdate是React中的生命周期方法之一。我们在这里讨论了所有这些。调用ComponentDidUpdate以专注于inputElement引用所引用的输入框。组件在提交表单时已更新。 this.props.inputElement.current.focus()在输入区域中设置焦点，因此我们可以继续在待办事项列表中键入下一项。

显示待办事项

我们拥有待办事项的状态，我们需要的是另一个可以在屏幕上呈现这些待办事项的组件。

我们将这个组件TodoItems并将所有项目作为道具传递。

这是TodoItems样子……

 从“反应”中导入React，{组件}

  TodoItems类扩展了Component { 
  createTasks（item）{ 
 返回 {item.text} 
 
  } 
  render（）{ 
  const todoEntries = this.props.entries 
  const listItems = todoEntries.map（this.createTasks）

 返回 {listItems} 
 
  } 
  }

 导出默认的TodoItems

函数createTasks为每个传递的项目返回li。它使用我们之前提供的密钥。由于React必须能够区分多个项目以重新渲染适当的项目，因此它在当前阶段无法使用键。

使用映射功能将所有这些列表项保存到listItems 。这将在ul in return语句中使用。

删除待办事项

我们添加了待办事项，我们可能想删除一些。

我们已经在TodoItems.js显示了TodoItems.js ，我们做了一些小的修改。只需使用键将onClick侦听器添加到deleteItem。

  createTasks = item => { 
 返回（ 
   this.props.deleteItem（item.key）}> 
  {item.text} 
  
 
  ） 
  }

这将使用键作为参数执行deleteItem。该道具必须从App传递。

在App.js中创建一个新属性，作为deleteItem 。

  deleteItem =键=> { 
  constfilteredItems = this.state.items.filter（item => { 
 返回item.key！==键 
  }） 
  this.setState（{ 
 项目：filteredItems， 
  }） 
  }

它从items状态过滤接收到的密钥。然后将项目设置为过滤项目。

结束语：

如果此帖子有帮助，请单击下面的拍手ap按钮几次，以表示支持！ ⬇⬇

特色React JS课程

React 16 —完整指南（包括React Router 4和Redux）

4.7 / 5星|| 33.5小时的视频|| 61,597名学生

学习React或深入研究它。学习理论，解决作业，在演示项目中进行实践，并构建一个在整个课程中都得到改进的大型应用程序：Burger Builder！ 学到更多。

React 16：完整课程（包括React Router 4和Redux）
潜入并从头开始学习React！ 学习Reactjs，Hooks，Redux，React路由，动画，Next.js以及更多方法！ click.linksynergy.com