如何使用react更改按钮的背景色

Question

我正在使用bootstrap进行react，最初我给我的按钮赋予相同的颜色，现在我要做的是点击按钮时更改该按钮的颜色，如果我点击其他按钮，它会将该按钮和第一个按钮的颜色改回基本(默认(颜色

我之前使用jquery传递onclick事件并切换颜色，但现在我是新手，所以不知道如何做。

我的代码

代码沙箱

我想要的是假设我有7个按钮，我点击第一个按钮，它的颜色应该会改变，然后如果我点击下一个按钮，那么第一个按钮应该会恢复正常，点击的(第二个(按钮应该会改变颜色。

重要第一个按钮应始终处于活动模式，即它应具有活动颜色，然后如果下次单击，则颜色将变为正常，单击的按钮应具有颜色

import React from 'react'
function Stddata() {
const button_Data = [
{
"name": "Name",
"value": "name"
},
{
"name": "Class",
"value": "class"
},
{
"name": "Age",
"value": "age"
},
{
"name": "Subjects",
"value": "subjects"
},
{
"name": "School",
"value": "school"
}
]
return (
<div>
{ button_Data.map(item => (
<div key={item.value}>
<button 
className="btn btn-outline-secondary mb-1 form-control text-left"
value={item.value}
onClick={props.trigerOnClickEmpSideBtn}
>{item.name}</button>
</div>
))}   
</div>
)
}
export default Stddata

Answer 1

您需要使用一些状态。在组件中，让我们定义哪个按钮当前处于活动状态。我们可以使用useState并将其起始值设置为0，正如您所说，您希望第一个按钮启动为活动：

import React, { useState } from 'react'
// inside your component
const [activeButton, setActiveButton] = useState(0)

您的按钮的onClick将引用该函数来更改当前活动的按钮。在className中，它将检查自己的索引是否与当前活动按钮相同，并相应地设置css类：

{button_Data.map((item, index) => (
<button 
className={`btn ${activeButton === index ? 'btn-success' : null}`}  
value={item.value} 
onClick={ () => {setActiveButton(index)} }
>
{item.name}
</button>
))}

编辑：添加工作演示

实际上，我不得不将每个按钮分解为自己的组件，因为现在每个按钮都需要管理自己的状态。基本原理是一样的，但每个按钮现在都是自己的组件，有自己的状态。

编辑2：

随着对初始问题的更改，我更改了答案。codesandbox也反映了这些变化。codesandbox仍然为按钮使用一个单独的组件，尽管根据新的问题参数，这并不是真正必要的，但原理是一样的。

Answer 2

您需要做的是存储按钮的活动状态，默认状态为第一个按钮的名称。

完成此操作后，可以为所选按钮设置活动className。

按钮的onClick事件更新activeButton状态。

const button_Data = [
{
name: "Name",
value: "name"
},
{
name: "Class",
value: "class"
},
{
name: "Age",
value: "age"
},
{
name: "Subjects",
value: "subjects"
},
{
name: "School",
value: "school"
}
];
function Stddata(props) {
const [activeButton, setActiveButton] = useState(button_Data[0].name);
const handleClick = e => {
const name = e.target.name;
setActiveButton(name);
};
return (
<div>
{button_Data.map(item => {
const className = activeButton === item.name ? "active" : "";
return (
<div key={item.value}>
<button
className={`btn btn-outline-secondary mb-1 form-control text-left ${className}`}
name={item.name}
value={item.value}
onClick={handleClick}
>
{item.name}
</button>
</div>
);
})}
</div>
);
}
export default Stddata;

工作演示

Answer 3

将此组件用于按钮

import React from 'react';
import {View,StyleSheet, TouchableOpacity} from 'react-native'
const Btn= props =>{
if(props.touch){
return (
<TouchableOpacity style={{...styles.boxes, ...props.style}} onPress={props.onPress}>
{props.children}
</TouchableOpacity>
);
}else{
return (
<View style={{...styles.boxes, ...props.style}}>
{props.children}
</View>
);
}
}
const styles= StyleSheet.create({
boxes :{
padding:18,
backgroundColor:'white',
borderRadius:20        
}
});
export default Btn;

在页面中，你想让Btn像这个一样使用它

<Btn style={styles.items} touch="on" onPress={props.getProductsRequest}>
<Text  style={styles.itemTxt}> some thex</Text>
</Btn>

注意上的触摸