React入门实战（一）联系人列表Contact（附完整代码）

import React from ‘react’

const Contacts = () => {

}

export default Contacts;

在主组件App.js中引入并通过props把Contact数据传过来

// 引入react

import React, { Component } from ‘react’

// 引入Contact

import Contacts from ‘./Contacts’;

// 创建类组件App

class App extends Component {

state = {

Contact: [

{ id: 1, name: “ccy”, age: 24, sex: “female” },

{ id: 2, name: “ccy1”, age: 23, sex: “male” },

{ id: 3, name: “ccy2”, age: 25, sex: “female” }

]

}

render() {

// 使用Contacts

return (

)

}

}

export default App;

子组件Contact接收props

import React from ‘react’

const Contacts = (props) => {

// 解构时的命名需要与传递过来的变量名一致

const { contactList } = props;

console.log(contactList);

return (

联系人列表

)

}

export default Contacts;

效果：可以看到，App.js传递过来的三条记录已经拿到了

---

展示联系人

---

列表渲染，重点是使用map逐一解析每一条记录，并用JSX语法包装

• 一条记录用一个div包裹

• 每一条记录都需要一个唯一id标识

注：Contact.js文件中解构出props的contactList之后添加这段代码

// 如果传过来的contactList有数据时逐条解析，没有时提示没有联系人

const contactShow = contactList.length ? (

contactList.map(contact => {

return (

Name: {contact.name}

Age: {contact.age}

Sex: {contact.sex}

)

})

) : (

抱歉，没有找到要展示的联系人

)

// 返回待渲染的代码

return (

联系人列表

{contactShow}

)

效果：数据已展示，3条记录

---

删除联系人

---

给Contacts.js组件添加一个删除功能

• 增加“ 删除 ”按钮，点击该按钮，对应记录就会被删除

• 点击按钮后，将这条记录的id传递给主组件

• 主组件根据该id删除state的记录，更新展示的内容

由于数据存在App.js里，因此最终删除操作是由App.js完成的

在App.js文件中定义删除函数：

// 根据id删除记录，更新state

deleteContact = (id)=>{

// 如果id匹配，代表是要删除的记录，就不保留

let contactForm = this.state.Contact.filter(contact=>{

return contact.id !== id

})

this.setState({

Contact:contactForm

})

}

将此函数通过props传给Contacts组件，让Contacts返回需要删除的id

render() {

return (

)

}

Contacts组件接收props传来的变量

// App.js多传递了一个变量deleteContact，也需要解构出来

const { contactList,deleteContact } = props;

当用户点击“删除”按钮时，触发点击事件，调用App.js传来的函数deleteContact，将id传递出去

<button onClick={()=>{deleteContact(contact.id)}}>删除

效果：

---

新增联系人

---

新建一个AddContact.js文件，用于实现新增联系人的功能

• 用户在文本框内输入联系人的信息

• 点击“提交”，更新state数据

最终数据添加的任务是由App.js完成的，添加联系人的函数写在App.js中，并通过props将函数接口传给AddContact

// 添加一条联系人记录

addContactFunc = (contact)=>{

// 给新记录添加一个随机唯一id

contact.id = Math.random();

// 更新到state中

let contactForm = […this.state.Contact, contact];

this.setState({

Contact: contactForm

})

}

render() {

return (

)

}

AddContact.js：

使用的也是类组件，先定义一下文本框，将label与input绑定 ——htmlFor属性：

import React, {Component} from ‘react’

class AddContact extends Component {

// 初始化state，用来存储联系人信息

state = {

name:“”,

age:“”,

sex:“”

}

render(){

return(

Name:

Age:

Sex:

提交

)

}

}

export default AddContact;

• 当用户输入数据时，及时更新到state中 ——onChange事件；

• 提交时，传递给App.js ——onSubmit事件:

// 文本框有改变，就更新state

handleChange = (e)=>{

this.setState({

[e.target.id] : e.target.value

})

}

// 点击提交时，将数据传递给主组件，并重置文本框

handleSubmit = (e)=>{

e.preventDefault();

this.props.addContact(this.state);

this.setState({

name:“”,

age:“”,

sex:“”

})

}

效果：

---

完整代码：

---

App.js:

// 引入react

import React, { Component } from ‘react’

import Contacts from ‘./Contacts’;

import AddContact from ‘./AddContact’;

// 创建类组件App

class App extends Component {

state = {

Contact: [

{ id: 1, name: “ccy”, age: 24, sex: “female” },

{ id: 2, name: “ccy1”, age: 23, sex: “male” },

{ id: 3, name: “ccy2”, age: 25, sex: “female” }

]

}

// 添加一条联系人记录

addContactFunc = (contact)=>{

// 给新记录添加一个随机唯一id

contact.id = Math.random();

// 更新到state中

let contactForm = […this.state.Contact, contact];

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-a0Foe2N4-1715586068358)]

[外链图片转存中…(img-oJ0yvzZV-1715586068359)]

[外链图片转存中…(img-PmecR9wO-1715586068359)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！