React本机自定义单选按钮活动按钮的不同颜色
可以通过使用CSS样式来实现。在React中，可以通过给活动按钮添加不同的CSS类来改变其颜色。
首先，在React组件中定义一个状态来表示活动按钮是否被选中。例如：
import React, { useState } from 'react';
function RadioButton() {
const [isActive, setIsActive] = useState(false);
const handleButtonClick = () => {
setIsActive(!isActive);
};
return (
<button
className={isActive ? 'active' : ''}
onClick={handleButtonClick}
>
Radio Button
</button>
);
}
export default RadioButton;在上面的代码中，我们使用了useState钩子来定义一个名为isActive的状态，并初始化为false。当按钮被点击时，通过调用handleButtonClick函数来切换isActive的值。
接下来，在CSS文件中定义两个类，分别用于表示活动按钮和非活动按钮的样式。例如：
button {
/* 非活动按钮的样式 */
background-color: #ccc;
color: #fff;
}
button.active {
/* 活动按钮的样式 */
background-color: #f00;
color: #fff;
}在上面的代码中，我们定义了button和button.active两个类，分别用于表示非活动按钮和活动按钮的样式。可以根据需要自定义颜色值。
最后，在React组件中使用上述RadioButton组件。例如：
import React from 'react';
import RadioButton from './RadioButton';
function App() {
return (
<div>
<h1>React Native Custom Radio Button</h1>
<RadioButton />
</div>
);
}
export default App;通过上述代码，我们可以在React应用中使用自定义的单选按钮，并通过CSS样式来改变活动按钮的颜色。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，这里无法提供相关链接。但是，腾讯云提供了丰富的云计算服务，可以通过访问腾讯云官方网站来了解更多信息。
相关·内容
3回答
单击React.js按钮，更改整个应用程序的背景色。
javascript、css、reactjs
我试图改变我的背景的颜色，我的整个反应应用程序的按钮点击。但是，我只更改按钮本身的颜色。我正在将App.css导入到我的应用程序中，我想动态地从一个名为ChangeColor的函数中更改应用程序的CSS。这个函数然后放在我的Header.js中，然后放在App.js中。
有办法让我这么做吗？这是我的密码：
import React, {useState} from "react";
import Button from "react-bootstrap/esm/Button";
import '../../../App.css'
funct
浏览 12提问于2022-09-23得票数 0
回答已采纳
1回答
如何更改只用于按下React的选项卡的图标的颜色？
css、react-native
我有一个页脚在我的反应应用程序底部，有四个图标作为标签。我想更改按下的图标的颜色。使用我当前的代码，当一个图标被按下时，它会改变多个图标。我不知道如何在if语句中实现这一点，以便只更改按下的图标的颜色，并将活动图标还原回其灰色颜色。任何帮助都很感谢，这是我的应用程序的页脚：
import {React, useState} from "react";
import "./Footer.css";
import NightlightRoundedIcon from '@mui/icons-material/NightlightRounded';
i
浏览 1提问于2022-07-29得票数 0
回答已采纳
2回答
新浏览器选项卡不加载样式组件
reactjs、styled-components
我有一个React应用程序，在这里我要打开一个新的浏览器选项卡点击。问题是我的样式组件的样式不会加载在这个新的浏览器选项卡中。
为什么我的样式组件的样式没有加载在新的浏览器选项卡中？
这是我的浏览器选项卡组件：
import { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
export const NewBrowserTab = ({ children }) => {
const [container, setContainer
浏览 3提问于2021-09-17得票数 0
回答已采纳
2回答
如何将参数从一个React组件导入另一个React组件
javascript、html、reactjs、web、development-environment
请道歉，我缺乏知识，但我是新的反应和JavaScript。 我正在建立一个网站，我有一个边栏和页面顶部的导航栏。边栏是通过位于导航栏组件中的汉堡菜单来激活/停用的。它是通过CSS-classes：<nav className={isActive ? 'nav-menu active' : 'nav-menu'}>激活的 我现在的问题是，我不知道如何将变量toggleButton和isActive从声明它们的Navbar.jsx传递到我需要它们来激活我的边栏的Sidebar.jsx。需要导入js文件吗？可以从JSX代码中单独导出isActive和to
浏览 18提问于2021-04-08得票数 0
回答已采纳
2回答
我怎么能用带反应钩的互斥装置呢？
javascript、react-hooks
我希望确保代码块不会同时运行。不过，异步Mutex库似乎不适合我。下面是一个最小的复制：
/* eslint-disable */
import React, { useState, useEffect } from "react";
var Mutex = require("async-mutex").Mutex;
const Timer = () => {
const [isActive, setIsActive] = useState(false);
const mutex = new Mutex();
useEffect(() =&
浏览 3提问于2021-01-07得票数 2
回答已采纳
3回答
从该组件外部更新功能组件的状态(单击另一个文件中的按钮)
javascript、reactjs、react-state-management、react-functional-component
我有一个名为Settings的组件，它包含一个变量(IsActive)，useState默认为true。在单击按钮时，我需要从该组件的外部更新变量(IsActive)的状态。该按钮不是此组件的一部分。如何在单击按钮时更改该变量的状态。
文件Settings.tsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
export const reportSettings = () => {
ReactDOM.render(<Setting
浏览 5提问于2020-03-19得票数 1
回答已采纳
2回答
如何处理useEffect闭包内的陈旧状态值？
reactjs、react-hooks
下面的示例是具有一个按钮(启动定时器)的计时器组件，以及两个显示经过的秒数和经过的秒数乘以2的标记。
但是，它不起作用( )
代码
import React, { useState, useEffect } from "react";
const Timer = () => {
const [doubleSeconds, setDoubleSeconds] = useState(0);
const [seconds, setSeconds] = useState(0);
const [isActive, setIsActive] = useState(fal
浏览 2提问于2020-08-14得票数 1
1回答
通过单击react更改div的背景色
reactjs、onclick、background-color
组件中有三个div (也可以超过三个)。我想改变他们的颜色，当他们将被点击。如果我再点击一下，它们就会恢复原来的颜色。在我的代码中，如果我单击任何一个div，所有div都在改变，您能帮助我为特定的div做它吗？守则是：
import React,{useState} from 'react'
export default function ChangeColor() {
let [colorState,changeState]=useState(['red','green','blue']);
let [isActi
浏览 11提问于2022-11-22得票数 0
2回答
ReactJs:定义事件处理程序的最佳实践
javascript、html、reactjs、events、event-handling
我最近开始使用React，我想知道在React中定义事件处理程序的最佳实践是什么。这就是我一直使用react事件处理程序的方式：
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [counter, setCounter] = useState(0);
const handleButtonClick = () => {
setCounter(counter + 1);
};
re
浏览 1提问于2020-11-12得票数 2
回答已采纳
3回答
什么时候应该使用useEffect钩子而不是事件侦听器？
reactjs、react-hooks、use-effect、use-state、event-listener
当可以使用事件侦听器简化useEffect钩子时，应该使用它吗？
例如，在下面的代码片段中，我使用事件侦听器更改一些状态，然后使用useEffect钩子对状态更改做出反应，并做其他一些事情。
import { useEffect, useState } from "react";
export default function Foo() {
const [isActive, setIsActive] = useState(true);
useEffect(() => {
// do any kind of business logic
}, [i
浏览 8提问于2022-05-17得票数 3
回答已采纳
1回答
使用React挂钩从HTML元素中删除/添加类名
html、react-hooks、class-names
我正在尝试通过单击一个按钮从html元素中删除一个属性： import React , {useState} from 'react';
import classNames from 'classnames';
function App () {
const [isActive, setIsActive] = useState(false);
const handleOnClick = () => {
setIsActive(!isActive);
};
return (
<Inline
浏览 51提问于2021-11-16得票数 1
3回答
带有反应路由器的UseContext
reactjs、react-hooks、react-context
很快，当我尝试在我的组件中使用useState和useContext时，所有的页面都会消失。UseState因为某种原因阻塞了我的路由器，我不知道为什么.你能告诉我我的错误在哪里吗？
下面的代码: Index.js
export default function App() {
const [value, setValue] = useState(false) -----> here I set the state
return (
<BrowserRouter>
<UserContext.Provider value={{ va
浏览 7提问于2022-10-23得票数 0
回答已采纳
1回答
使用react的验证函数
typescript、react-native
我正在尝试用React做一个验证，用一个有几个按钮的页脚，然后每个按钮都有它的值(主页，订单，付款，等等)，我想当它位于其中一个时，它将被检查(我已经在css中有)，我没有设法使正确的setState来实现它。
interface State {
value: any,
isActive: boolean
}
class Footer extends React.PureComponent<Props, State>{
state: State = {
value: '',
isActive: false
}
render()
浏览 0提问于2020-08-01得票数 1
2回答
将数据或状态发送到另一响应页
javascript、reactjs
所以，我的反应项目有麻烦。
我需要将一些数据(或者也可以是状态(true或false))发送到另一个页面。我用的是反应路由器。
import { useState } from "react"
import ProductToCart from "./ProductToCart"
import Cart from "../../Pages/Cart"
const Buy = () => {
const [buttonText, setButtonText] = useState("Add to cart")
con
浏览 4提问于2022-10-17得票数 0
3回答
无法用反应钩切换状态
javascript、reactjs、boolean
我不得不在JS/React中将类重写为一个函数，但是要让钩子在函数中工作有一些困难。
function Switch(props) {
const [isActive, setIsActive] = React.useState();
function handleClick() {
setIsActive(!isActive);
}
const className = `switch ${props.color} ${props.isActive ? 'on' : 'off'}`;
return (
<
浏览 8提问于2022-01-06得票数 0
回答已采纳
1回答
如何在另一个组件中显示函数值？
javascript、reactjs
我想在另一个组件中从秒表中同时显示formatTime，以便当我从输入中保存值时，秒表中的当前时间将保存并显示在列表上？有人能帮我吗?我是新手吗？问题是，我不知道如何获得formatTime的值，就像在返回的Kello.js中那样，只调用它，因为它在一个不同的组件中。
Kello.js
import React, {useState,useRef} from 'react';
const Kello = () => {
const [timer,setTimer] = useState(0)
const [isActive, setIsActiv
浏览 0提问于2021-01-04得票数 2
回答已采纳
1回答
样式组件只向自定义组件传递一些值。
javascript、css、reactjs、styled-components
嗨，我正在尝试配置一个按钮的颜色，基于它的按钮类型，它将放在一个模式中。在这种情况下，“成功”或“危险”：
import React from "react";
import styled from "styled-components";
const ButtonStyled = styled.button`
background-color: ${(props) =>
props.btnType === "Success" ? "green" : "red"};
bord
浏览 0提问于2020-10-26得票数 1
回答已采纳
1回答
如何在Next.js +打字稿中将道具从孩子传给家长
typescript、next.js、react-props
我正在用Next.js为我的学校项目构建一个小应用程序，并希望将数据从孩子传递给家长。我观察并应用了中所教的内容，但是得到了一个TypeScript错误。从下面的代码中可以看到，我正在尝试从父程序获得一些支持，呈现一些jsx并将存储在useState中的一些值返回给父程序。我还计划在应用程序中多次使用这个组件。尽管我认为我做得对，但我发现一个错误，那就是.
Type '({ placeholderB, placeholderH, createButton, deleteButton, updateButton, maxLengthB, maxLengthH, }: Props) =&g
浏览 13提问于2022-05-25得票数 0
2回答
如何在不影响其他按钮的情况下更改按钮的背景色？
javascript、html、css、reactjs
我想改变背景颜色从DIV时，我点击不影响其他按钮在同一行。希望你能帮我..。谢谢!
例如，当我单击第一个DIV开发人员时，背景色会发生变化，但是，它会影响其他按钮，我只想影响我单击的按钮来更改背景色。
import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg'
import { Dropdown } from '../ui/dropdown/Dropdown';
exp
浏览 4提问于2022-05-03得票数 1
1回答
在下拉菜单中更改值
javascript、react-native
我正在使用Reacti原住民中的自定义下拉菜单，当试图在其他组件中重用下拉菜单时，更改文本时遇到了问题。
DropdownMenu.js
export const DropdownMenu = ({dropdownMenuItems}) => {
const [isActive, setIsActive] = React.useState(false);
const onPress = () => {
setIsActive(!isActive);
};
return (
<TouchableOpacity
activeOpaci
浏览 4提问于2022-06-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
