React组件事件通知

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第5篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

《使用webpack让React模块化》

《React的状态管理》

本篇将基于《React的状态管理》继续介绍由子组件通知父组件实现状态更新的方法。主要有两个案例：

点击删除图标按钮的时候，删除对应的颜色组件

点击星星图标的时候，重新渲染评分组件

实现删除颜色

修改颜色组件

目标

1、给颜色组件加上一个删除按钮。

2、给删除按钮绑定一个删除事件。

3、当用户点击删除按钮的的时候通知父组件执行操作。

实现方案

第一步：引入图标

import from "react-icons/fa"

第二步：在JSX中加一个按钮元素

第三步：让组件接收一个onRemove方法作为属性

Color()

完整代码

components/Color.js

import React from 'react';

import StarRating from './StarRating';

import from "react-icons/fa"

export default function Color() {

return (

onRemove(id)}>

)

}

修改颜色列表组件

目标

接收一个onRemoveColor方法作为属性，并将该属性绑定到颜色组件的onRemove方法上。实现当用户点击删除按钮的时候，将事件继续往父组件传递。

即就是说，颜色列表组件相当于一个中间人，传递了如何处理颜色删除按钮的点击方法。该方法的真实实现还在颜色列表的父组件中。

实现方案

第一步：给颜色组件绑定onRemove方法

第二步：接收一个onRemoveColor方法作为属性

ColorList ( { colors = [], onRemoveColor = f=>f } )

完整代码

components/ColorList.js

import React from 'react';

import Color from './Color';

export default function ColorList ( { colors = [], onRemoveColor = f=>f } )

{

if ( !colors.length ) return 没有颜色数据

return (

{

colors.map( color => )

}

)

}

修改根组件

目标

处理颜色删除按钮的点击事件，实现如何删除颜色组件的方法。

实现方案

第一步：从hooks中接收第二个参数，用于设置颜色列表

const [ colors,setColors ] = useState( colorData )

第二步：给颜色列表组件绑定onRemoveColor方法。该方法的实现方式很简单，就是过滤掉被删除的颜色，将剩下的颜色重新赋值给颜色列表。

onRemoveColor=

完整代码

App.js

import { useState } from 'react';

import colorData from './data/color.json';

import ColorList from './components/ColorList';

export default function App ()

{

const [ colors,setColors ] = useState( colorData )

return

}

实现点击评分

修改评分组件

目标

1、接收一个onRate评分方法作为参数

2、让星星图标被点击的时候，触发onRate评分方法

实现方案

第一步：接收onRate方法作为参数

StarRating({

style = {},

totalStars = 5,

selectedStars = 0,

onRate = f => f,

...props

}) {

第二步：给星星图标绑定点击事件，触发评分方法

selected=

onSelect={() => onRate(i + 1)}

/>

完整代码

components/StarRating.js

import React from 'react';

import Star from "./Star.js"

const createArray = length => [...Array(length)]

export default function StarRating({

style = {},

totalStars = 5,

selectedStars = 0,

onRate = f => f,

...props

}) {

return (

selected=

onSelect={() => onRate(i + 1)}

/>

))}

/

)

}

修改颜色组件

目标

1、接收onRate评分方法作为参数

2、给评分组件绑定评分方法，向上传递颜色ID和新的评分

实现方案

第一步：接收onRate方法作为参数

Color()

第二步：给评分组件绑定评分方法

onRate=/>

完整代码

components/Color.js

import React from 'react';

import StarRating from './StarRating';

import from "react-icons/fa"

export default function Color() {

return (

onRemove(id)}>

)

}

修改颜色列表组件

目标

1、接收一个onRateColor评分方法作为参数

2、给颜色组件绑定评分方法

实现方案

第一步：接收一个onRateColor评分方法作为参数

ColorList()

第二步：给颜色组件绑定评分方法

onRemove=

onRate=/>

完整代码

import React from 'react';

import Color from './Color';

export default function ColorList() {

if (!colors.length) return 没有颜色数据

return (

{

colors.map(color => )

}

)

}

修改根组件

目标

实现onRateColor方法，让星星图标每次被点击的时候，都能够触发新的评分，重新渲染页面。

实现方案

给颜色列表组件绑定onRateColor方法

onRateColor={(id, rating) => {

const newColors = colors.map(color => color.id === id ?

{...color, rating} : color)

console.log("222", newColors)

setColors(newColors)

}}

完整代码

import from 'react';

import colorData from './data/color.json';

import ColorList from './components/ColorList';

export default function App() {

const [colors, setColors] = useState(colorData)

return {

const newColors = colors.map(color => color.id === id ? {...color, rating} : color)

console.log("222", newColors)

setColors(newColors)

}}/>

}

总结