首页 > 其他分享 >React: 按钮点击时修改颜色

React: 按钮点击时修改颜色

时间:2022-11-24 13:36:14浏览次数:44  
标签:handleClick 按钮 React 点击 setActive import

背景

当存在多个点击按钮时,需要提示用户点击的哪个按钮,所以要进行颜色的修改

import * as React from 'react';
import './style.css';

export default function App() {
  const [active, setActive] = React.useState('red');
  const handleClick = () => {
    setActive('green');
  };
  return (
    <div>
      <button style={{ backgroundColor: active }} onClick={() => handleClick()}>
        123
      </button>
    </div>
  );
}

代码截图

image

效果实现

image

标签:handleClick,按钮,React,点击,setActive,import
From: https://www.cnblogs.com/leoych/p/16921556.html

相关文章

  • 网易私有云新增的测试驱动力,Airtest-ocr文字识别点击真香!
    1.前言熟悉我们开源框架的朋友都知道,AirtestProject一直以来,都对外开源了2个自动化测试框架,Airtest和Poco,Airtest是基于图像识别原理的,Poco是基于控件识别原理的。这2......
  • react-app-rewired的使用备注&&禁止生成.map(对应隐藏源码)
    一:使用react-app-rewired时,除了根据文档对应修改设置外,还给予了一些配合此插件直接使用的webpack插件集:​​https://github.com/timarney/react-app-rewired#version-1x......
  • React开发调试工具/插件(React_Developer_Tools)
    React开发调试工具React开发调试插件更新记录:2022年11月24日00:19:17更新 最新版本React_Developer_Tools开发工具_v4.25(07282022)最近开始卷,学到react了,特......
  • React动态路由
    动态路由传参有三种方式:params方式注册路由的时候通过:params的形式来声明{/*通过:id声明我们要传递的参数是id*/}<Routepath="/detail/:id"component={Detail}><......
  • React---编程式导航/声明式导航
    声明式导航通过NavLink来实现路由跳转的导航编程式导航通过js来实现路由的跳转import{Component}from"react";​exportdefaultclassNewsextendsCo......
  • react-infinite-scroll-component
    react-infinite-scroll-component  Acomponenttomakeallyourinfinitescrollingwoesgoawaywithjust4.15kB! PullDowntoRefresh featureadded.An......
  • react-infinite-scroll-component 中文文档
    react-infinite-scroll-component中文文档小遁哥关注0.1912020.07.1822:25:10字数553阅读16,064官网地址:https://github.com/ankeetmaini/react-infinite-sc......
  • React 组件通信总结
    React组件通信总结父子通信传递数据(父传子)与传递方法(子传父)/**@Author:HuangBingQuanbingquan111@qq.com*@Date:2022-11-2116:02:17*@LastEditors:Hua......
  • CSS 实现防止按钮重复点击
    代码如下:复制直接使用body{display:grid;place-content:center;height:100vh;margin:0;gap:15px;background:#f1f1f1;user-select:none;}......
  • WordPress全站左侧边栏添加联系站长按钮[WP教程]
    使用教程:也很简单,只需要在两个文件中添加一行代码就可以实现,具体演示效果可以查看本站觅知博客的效果1、后台主题设置—>自定义代码—>自定义CSS样式代码把下面的代码......