单击按钮更改所单击按钮和另一个按钮的className | ReactJs
单击按钮更改所单击按钮和另一个按钮的className是一个在ReactJs中常见的需求，可以通过以下步骤实现：
- 首先，在React组件中定义两个按钮，并为它们设置初始的className。例如：
import React, { useState } from 'react';
const ButtonComponent = () => {
const [button1Class, setButton1Class] = useState('button');
const [button2Class, setButton2Class] = useState('button');
const handleClick = () => {
setButton1Class('new-class');
setButton2Class('new-class');
};
return (
<div>
<button className={button1Class} onClick={handleClick}>Button 1</button>
<button className={button2Class}>Button 2</button>
</div>
);
};
export default ButtonComponent;- 在上述代码中，我们使用了React的useState钩子来定义两个状态变量
button1Class和button2Class，并初始化为'button'。然后，我们定义了一个handleClick函数，当按钮被点击时，会将两个按钮的className都设置为'new-class'。 - 在返回的JSX中，我们将按钮的className属性设置为对应的状态变量
button1Class和button2Class，这样当状态变量发生变化时，按钮的className也会相应地更新。
这样，当任意一个按钮被点击时，两个按钮的className都会被更改为'new-class'，从而改变它们的样式或行为。
在腾讯云的产品中，可以使用腾讯云的云开发服务来构建React应用。腾讯云云开发提供了一站式的云端支持，包括云函数、数据库、存储、托管等功能，可以帮助开发者快速搭建和部署React应用。具体可以参考腾讯云云开发的官方文档：腾讯云云开发。
相关·内容
2回答
我对Context API相当陌生。因此，我希望当我按下ButtonComponent中的按钮时，ButtonComponent中的所有内容在ImageComponent中也会消失，但当我单击该按钮时，什么也不会发生。如果可能的话，如果有人能帮助我，我会非常感激的。提前感谢！ //HiddenContext
import React from "react";
export const HiddenContext = React.createContext(false);
function HiddenProvider({ children }) {
const [hi
浏览 27提问于2020-11-02得票数 1
回答已采纳
2回答
按一下按钮，按一下钩子
、、、、
我刚开始的反应钩，并试图有3个按钮，我可以点击，它应该告诉我，它被点击了多少次。我可以让他们分开工作，但那不是表演。
因此，我想让它只对两个类有用:一个用于按钮，另一个用于计数器部分。但现在，我很难调用函数，并将按钮分离(单击哪个按钮)。
import React, { useState } from "react";
import Counter from "./Counter";
const Buttons = () => {
const HandleClick = () => {
setCounter(count + 1);
}
浏览 1提问于2021-11-27得票数 0
回答已采纳
1回答
我对Context API相当陌生。基本上，当我按下ButtonComponent中的按钮时，该按钮以及ImageComponent中的所有内容都会消失，但我得到了这个错误(TypeError: render is not a function updateContextConsumer)。请注意，该按钮呈现在Sidebar组件中。我有点纠结于这个错误/bug，如果能得到别人的帮助，我将非常感激。 HiddenContext
import React, { useState } from 'react';
export const HiddenContext =React.c
浏览 12提问于2020-11-01得票数 0
1回答
所以我想当我按下button组件中的按钮时，'li section‘中的所有东西都会消失，就像在ImageComponent中一样，但它不起作用，我想知道我的错误是什么。ButtonComponent在其他地方呈现。 App Component/Parent
function App({ hideButton }) {
return (
<div className="App">
<ImageComponent hideButton={hideButton} />
</d
浏览 21提问于2020-11-01得票数 0
回答已采纳
所有的方法我都试过了，但还是不起作用。我试图建立一个网站，其中有一个菜单图标显示在移动视图中，当我点击它:它切换！
import React, {useState} from 'react'
import {Link} from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button';
function Navbar() {
const {click, setClick} = useState(false);
co
浏览 2提问于2022-01-04得票数 0
回答已采纳
3回答
我现在试着教自己如何反应。我遇到了这种奇怪的行为，无法解释发生了什么，所以我希望得到一些答案。
在下面的代码片段中。我有一个变量index，最初设置为0。单击该按钮时，我希望handleClick()更新index的值。然而，它并没有像我所期望的那样做。
const { useState } = React;
const Home = () => {
let names = ["Hello", "World"];
let index = 0;
const [name, setName] = useState(names
浏览 7提问于2022-04-10得票数 0
2回答
我正在实现一个自定义侧面板，从右边打开。我能够实现显示和隐藏的面板上点击一个按钮。但是当我点击外面的时候，我想要隐藏同样的东西。我是附加外部点击处理程序，当我这样做时，它甚至没有出现。有人能帮上忙吗
import React, { useRef, useCallback, useEffect } from "react";
import "./styles.css";
export default function SlideDrawer({ show, setDrawerOpen }) {
const sideMenuRef = useRef(null
浏览 1提问于2022-11-17得票数 0
回答已采纳
4回答
我在一个react组件中有多个按钮，它将允许我显示或隐藏我单击的按钮所基于的一些数据。我有一个切换动画，将设置两个不同的图标状态(显示和隐藏)
设定状态
下面是我如何设置我的状态：const [clicked, setClicked] = useState(false);
手柄点击
切换单击事件的函数。
const handleClick = () => {
setClicked(s => !s);
};
按钮开关
<Button className={style.selector} onClick={handleClick}>
浏览 1提问于2020-04-21得票数 3
回答已采纳
1回答
我有一个网格，其中有多个按钮，按钮的数量随行而变化。例如，第1行可以有4个按钮，第2行可以有3个，第3行可以有3个等等。我试着让它在点击一个按钮时，不仅改变它的背景色，而且改变网格中每个具有相同文本的按钮。所以如果我的纽扣看起来像这样：
[ text ] [ moreText ] [ someMoreText ]
[ texting] [ textAgain ] [text]
[textAgain] [ someMoreText]
这样做的想法是，当我单击第1行中的按钮[ text ]时，它还会更改第2行第3列中的按钮，也就是[ text ]。
现在，我可以得到一个按钮来改变，但我坚持
浏览 3提问于2021-12-27得票数 2
回答已采纳
因此，我陷入了需要从多个不同的可点击元素触发相同材料的情况-UI <Popper />组件。
实际上，它是Material网站上的，当调用Popper组件时，您可能希望传递一个名为anchorEl的属性，该属性定义了popper将定位在画布上的位置。我的意图是这个anchorEl总是一样的，因此弹出程序总是在UI中相同的位置打开。
关于资料-UI文档的大多数例子都提出了以下使用Popper的方法：
const SimplePopper = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
co
浏览 7提问于2021-03-05得票数 0
回答已采纳
我是新的反应发展，经过一些实践，我正在创建一个表单使用React和在控制台显示了一些错误，我是第一次看到这种类型的错误，所以请您帮助我理解这一点？我怎么能解决这个问题？我在哪里搞错了？
import React, { useState } from "react";
const ControlledInputs = () => {
const [username, setUsername] = useState();
const [email, setEmail] = useState();
const ha
浏览 1提问于2021-12-06得票数 0
3回答
我正在尝试重置单击按钮时的值，但无法执行此操作。不知道问题出在哪里。 这是我在form中的一个字段： <Grid item xs={5} md={5} lg={5}>
<InputLabel htmlFor="outlined-adornment-fName" required>
First Name
</InputLabel>
<FormControl
className={classes.formControl
浏览 26提问于2020-10-03得票数 0
2回答
所以我正在构建一个反应冥想应用程序。为了简单起见，我给了它25分钟的倒计时。
当点击按钮时，我希望倒计时开始。但是，当我将setInterval包装在handleClick()函数中时，每单击一次就会减少秒数，而不是触发一次倒计时。
如能提供任何帮助，我们将不胜感激。
import React, { Component, useState } from "react";
function Timer() {
const [minutes, setMinutes] = useState(25);
const [seconds, setSeconds] = useSta
浏览 9提问于2021-12-07得票数 0
回答已采纳
1回答
React功能
、、、、
我有一个内容组件，它呈现2个Panel组件。内容组件将其状态传递给面板1，并将其传递给面板2。(面板1最初可见，面板2不可见)
期望的功能：
当用户单击“隐藏”组件时，它将其设置为可见组件并隐藏可见组件。
如果用户单击现在可见的组件，什么都不会发生，但是如果单击了现在隐藏的组件，则该组件将变为可见的，并且该可见组件将返回隐藏状态。
Content.jsx
import React, { useState } from "react";
import Panel from "../panel/Panel";
import "./conte
浏览 4提问于2021-09-21得票数 1
回答已采纳
3回答
我正在尝试在react中获取数据。问题是我必须点击按钮两次才能获得数据。虽然我没有在第一次点击时获得数据，但如果我添加JSON.stringify，它就会以某种方式呈现出来。如果不添加JSON.stringify，它将返回undefined。如果有人知道这是什么，请帮助我
import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'
function Example() {
cons
浏览 0提问于2020-11-02得票数 1
1回答
我正在制作一个2人的抽搐脚趾游戏，我无法找到如何防止玩家点击一个已经被点击的方块。
当前，如果玩家单击已经存在的X/O，则将状态更改为O/X。我想让它失效。
Board.js
import React, { useState } from 'react'
import Square from './Square'
export default function Board () {
const [xIsNext, setXIsNext] = useState(true);
const [squares, setSquares] = useState(
浏览 1提问于2021-11-21得票数 0
回答已采纳
2回答
import React, { useState, useEffect } from "react";
import Nav from "./nav.jsx";
import axios from "axios";
import Mensbuttons from "./mensbuttons.jsx";
export default function Standort() {
const [radius, setRadius] = useState(10);
const [latitude, setLatitude] =
浏览 2提问于2022-03-31得票数 1
3回答
我不得不在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回答
当我点击“添加输入”按钮时，我想要向我的网页添加新的输入标签。
尝试：
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [addInput, setAddInput] = useState(false);
const handleClick = () => setAddInput(true);
return (
<div className="App">
浏览 4提问于2020-10-07得票数 1
回答已采纳
我是React的新手，我不知道用什么关键字来找到我的解决方案。我有很多<button>，只是想切换一下被点击的按钮。如何做到这一点？ 这是我一直在尝试的..。 export default function App() {
const [text, setText] = useState(false);
const btnText = text ? 'Foo' : 'Bar';
const handleClick = () => setText((prevState) => !prevState);
return (
浏览 25提问于2020-07-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
