首页 > 其他分享 >react 做一个点赞按钮组件

react 做一个点赞按钮组件

时间:2023-01-03 15:02:27浏览次数:47  
标签:prevState 一个点 isLiked console react state 按钮 false setState


 

 创建组件Like.js

一开始设置为黑色false,isLiked如果为true渲染红心,false渲染黑心

setState时用了两种方法

import React, { Component } from 'react'

export default class Like extends Component {
constructor(){
super()
this.state={
isLiked:false
}
}
render() {
return (
<span onClick={this.handleLike.bind(this)}>
{
this.state.isLiked ? '取消

标签:prevState,一个点,isLiked,console,react,state,按钮,false,setState
From: https://blog.51cto.com/u_12422954/5985782

相关文章

  • react 渲染富文本中的标签内容
    假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面:例:<div>我是富文本内容</div>在标签上使用dangerouslySetInnerHTML={{__html:this.state.article}}importRea......
  • react 中使用less
    首先npm install less-loader less --save -dev安装之后终端npm run eject   来暴露webpack的配置文件,如果报错:Removeuntrackedfiles,stashorcommitanych......
  • react 日常工作小笔记
    默认配置defaultProps默认配置通过 ​​||​​​ 操作符可以实现,React.js也提供了一种方式 ​​defaultProps​​,可以方便的做到默认配置。classLikeButtonextendsC......
  • react 父子传值
    创建父组件 Demofather.js第一种传值:在子元素标签上 title='待办事项'x={1}字符串可以用""引号传递数字类型用{}大括号传递子组件标签内部可以传递任何数据,react将自动......
  • 实现可移动悬浮按钮(微信小程序/H5移动端html)
    微信小程序实现方案:我们可以利用微信小程序的内置组件轻松实现!1.将整个屏幕用movable-area组件覆盖,2.在movable-area内部添加一个movable-view实现自由滑动。3.重点:CSS属......
  • 【React框架基础知识】React框架的简介与基本使用方法
    一、简介React:由Facebook开发的用于构建用户界面的JavaScript库(开源)。1.1为什么要学前端框架?原生Javascript有很多痛点:原生JavaScript操作DOM繁琐、效率低(DOM-API操作UI......
  • 二级多级子路由时,react面包屑获取及处理
     因react-router中路由配置时,子路由为父级路由+子路由拼接而成,故当实现面包屑时需要根据当前路由获取完整的父子路由链入参:如/layout/list/showList出参:如['/l......
  • MixGo CE与带灯按钮块
    MixGoCE主控板可以外接按钮模块吗?MixGoCE配套的带灯按钮块怎么使用呢?typec接口的管脚怎么设置呢?……带灯按钮块带灯按钮块可以实现两个功能:按钮和灯使用按钮功......
  • 面试官:说说React-SSR的原理
    前言所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像SPA项目只渲染一个<divid="root"></div>剩下的都是靠JavaScript脚本去......
  • 字节前端必会react面试题
    React中keys的作用是什么?Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在React中渲染集合时,向每个重复的元素添加关键字对于帮助Reac......