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

免责声明

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

本月课程:

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

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

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

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

转到srcApp.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添加一个构造函数。 另外,将addItemhandleInput添加到相同的位置。

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