react---收藏的点击和取消（刷新还会存在）--demo

使用的都是爱奇艺电影接口

demo1–承接上上篇脚手架生成的react来继续的

修改了List.jsx和创建文件 src/api/favs.js
favs.js

export function onCollection(id) {const favs = getCollections();if (favs.indexOf(id) === -1) {favs.push(id);}localStorage.setItem("favs", JSON.stringify(favs));
}/*** 取消对数据的收藏* @param {*} id*/
export function cancelCollection(id) {const favs = getCollections(); // 获取现有的收藏信息const index = favs.indexOf(id); // 获取当前数据的索引,favs.finIndex(i=>i.id===id)也可查找索引，但是相比indexOf麻烦些if (index > -1) {favs.splice(index, 1); // 删除元素}localStorage.setItem("favs", JSON.stringify(favs)); // 保存
}/*** 获取收藏信息*/
export function getCollections() {let result = []; // 这块的let不能写成const，会报错导致页面错误try {if (localStorage.getItem("favs")) {result = JSON.parse(localStorage.getItem("favs"));}} catch (err) {console.log(err);}return result;
}

List.jsx

import React, { useState, useEffect } from "react";
import { Button, Card, Row, Col } from "antd";
import { loadDMList } from "../api/iqiyi";
import { getCollections, onCollection, cancelCollection } from "../api/fav";const { Meta } = Card;function List() {const [books, setBooks] = useState([]); // 数据const [page, setPage] = useState(1); // 页码const [isLoading, toggleLoading] = useState(false); // 加载状态// 因为localStorage的修改不会让页面重新渲染，页面的重新渲染是因为state数据的改变会让function重新执行一遍，const [isCollected, setCollected] = useState(false); // 是否收藏状态改变。const collections = getCollections();// 初始化的时候执行useEffect(() => {// setBooks([1, 2, 3, 4, 5, 6]);toggleLoading(true);loadDMList(page).then((res) => {setBooks([...books, ...res.data.data.list]);toggleLoading(false);});}, [page]);return (<div><h1>我是一个List组件</h1><Row justify="center" align="middle">{books.map((book) => (<Col span={6} key={book.albumId}><Cardhoverablestyle={{ width: 240, margin: "1rem auto" }}cover={<img alt="example" src={book.imageUrl} />}actions={[collections.indexOf(book.albumId) > -1 ? (<ButtononClick={() => {cancelCollection(book.albumId);setCollected(!isCollected);}}type="danger">取消</Button>) : (<ButtononClick={() => {onCollection(book.albumId);setCollected(!isCollected);}}type="primary">收藏</Button>),]}><Meta title={book.name} description="www.instagram.com" /></Card></Col>))}</Row><ButtononClick={() => {setPage(page + 1);}}type="primary"loading={isLoading}>下一页</Button></div>);
}export default List;

demo2—手写的react页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="referrer" content="no-referrer" /><title>练习</title><linkrel="stylesheet"href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/><style>html,body,#app,.container {height: 100%;margin: 0;padding: 0;}body {background-color: black;color: white;}.container {display: flex;flex-direction: column;}* {box-sizing: border-box;}.movies {width: 100%;flex: 1;padding: 0.1rem;overflow: auto;}.item {width: 25%;float: left;padding: 0.3rem;display: flex;flex-direction: column;align-items: center;justify-content: center;border-bottom: 1px solid gray;}.item img {height: 200px;}.item h3 {margin: 0.8rem 0;padding: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.item p {color: gray;font-size: 0.8rem;margin: 0;padding: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.m {display: block;margin: 1rem auto;width: 400px;height: 300px;border: 1px solid gray;}</style></head><body><div id="app"></div><script src="./libs/babel.min.js"></script><script src="./libs/react.js"></script><script src="./libs/react-dom.js"></script><script src="./data.js"></script><script type="text/babel">const { useState, useEffect } = React;function loadCollections() {let stars = [];if (localStorage.getItem("stars")) {try {stars = JSON.parse(localStorage.getItem("stars"));} catch (err) {}}return stars;}function Movie(props) {const { item, playMovie, startToggle, collections } = props;return (<div className="item"><imgonClick={() => playMovie(item.playUrl)}src={item.imageUrl}alt={item.name}/><h3>{item.name}</h3><p>{item.description}</p><ionClick={() => startToggle(item)}className="fa fa-heart"style={collections.indexOf(item.albumId) > -1 ? { color: "red" } : {}}></i></div>);}function App() {const [movies, setMovies] = useState(moviesData.data.list); // 列表const [url, setUrl] = useState(""); // 播放地址const [collections, setCollections] = useState([]); // 收藏列表// 播放const playMovie = (path) => {setUrl(`http://jx.618g.com/?url=${path}`);};// 收藏或者取消const startToggle = (item) => {let stars = loadCollections();if (stars.indexOf(item.albumId) == -1) {stars.push(item.albumId);} else {stars.splice(stars.indexOf(item.albumId), 1);}localStorage.setItem("stars", JSON.stringify(stars));setCollections([...stars]);};useEffect(() => {// fetch(//   "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=24&page_id=1&ret_num=48"// )//   .then((res) => res.json())//   .then((res) => setMovies(res.data.list));setCollections(loadCollections());}, []);return (<div className="container"><iframe className="m" src={url} frameborder="0"></iframe><div className="movies">{movies.map((item) => (<Moviekey={item.albumId}item={item}startToggle={startToggle}playMovie={playMovie}collections={collections}/>))}</div></div>);}ReactDOM.render(<App />, document.getElementById("app"));</script></body>
</html>

react---收藏的点击和取消（刷新还会存在）--demo相关推荐

React 组件绑定点击事件，并且传参完整Demo
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 1.传数组下标给点击事件Demo: const A = 65 // ASCII character codec ...
方维模板修改，发布分享、主题有商品时，标签需自动写到input里，不要再手动去点击添加，手动点击可取消...
方维模板修改,发布分享.主题有商品时,标签需自动写到input里,不要再手动去点击添加,手动点击可取消方维购物分享系统模板修改,发布分享.主题有商品时,标签需自动写到input里,不要再手动去点击添 ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
vueCli3中使用代理，点击页面的刷新按钮时报错
vueCli3中使用代理,点击页面的刷新按钮时报错点击刷新变成下面这种情况解决方式: publicPath: 将其值改为 publicPath: '/'(去掉/前的.) module.export ...
Html中解决点击 a 标签刷新的问题，实现点击时不刷新
Html中解决点击 a 标签刷新的问题,实现点击时不刷新参考文章: (1)Html中解决点击 a 标签刷新的问题,实现点击时不刷新 (2)https://www.cnblogs.com/iStu/p ...
react中onClick点击事件
react中onClick点击事件里的函数必须是箭头函数,不能在onClick{}括号里直接调用函数,不然相当于onClick{调用完的值},根本不会有效了,所以有这几种写法 1. 2. 3.
QTableWidget点击空白处取消选中
头文件 #include <QEvent> #include <QMouseEvent> 函数声明 //事件过滤bool eventFilter(QObject *obj, Q ...
jQuery 验证码输入错误后自动刷新验证码点击验证码图片刷新验证码
利用jQuery的attr()函数,向Servlet发出请求的时候加一个随机数, 保证每次都是不同的请求 $('#imgVcode').attr("src","/veri ...
为什么点击验证码不刷新
后台生成验证码,前台显示验证码,但是点击验证码不刷新,google F12的时候却点击就刷新了. 一直以为相同路径下的重复请求,在我开了 disable cache的时候是不会缓存的,后来打开设置才发 ...
React map遍历点击获取key
React map遍历点击获取key值在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作首先准备一个需要遍历循环的集合,可以是键值对,也可以是数组 ...

react---收藏的点击和取消（刷新还会存在）--demo

demo1–承接上上篇脚手架生成的react来继续的

demo2—手写的react页面

react---收藏的点击和取消（刷新还会存在）--demo相关推荐

最新文章

热门文章