Javascript 如何使用react更改按钮的背景色
我正在使用引导处理react，最初我给我的按钮赋予相同的颜色，现在我要做的是单击按钮更改按钮的颜色，如果我单击其他按钮，它将更改按钮的颜色，并将第一个按钮的颜色恢复为基本（默认）颜色 我在前面使用jquery传递onclick事件并切换颜色时已经完成了这项工作，但在这里我是新手，所以不知道如何做 我的代码 我要寻找的是，假设我有7个按钮，我点击第一个按钮，然后它的颜色应该改变，如果我点击下一个按钮，那么第一个按钮应该恢复正常，点击的（第二个）按钮应该改变颜色 重要信息第一个按钮应始终处于活动模式，即它应具有活动颜色，然后如果下一次单击，则颜色将变为正常颜色，单击的按钮应采用该颜色Javascript 如何使用react更改按钮的背景色,javascript,reactjs,Javascript,Reactjs,我正在使用引导处理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
从“React”导入React
函数Stddata（）{
常量按钮\u数据=[
{
“名称”：“名称”，
“值”：“名称”
},
{
“名称”：“类”，
“值”：“类”
},
{
“姓名”：“年龄”，
“价值”：“年龄”
},
{
“姓名”：“受试者”，
“价值”：“主体”
},
{
“名称”：“学校”，
“价值”：“学校”
}
]
返回(
{button_Data.map（项=>(
{item.name}
))}
)
}
导出默认标准数据
useStateimport React，{useState}来自“React”
//在组件内部
常量[activeButton，setActiveButton]=useState（0）
onClickclassName{button_Data.map((item, index) => (
<button
className={`btn ${activeButton === index ? 'btn-success' : null}`}
value={item.value}
onClick={ () => {setActiveButton(index)} }
>
{item.name}
</button>
))}
{button_Data.map（（项目，索引）=>(
{setActiveButton（索引）}
>
{item.name}
))}
随着最初问题的改变，我改变了答案。codesandbox也反映了这些变化。codesandbox仍然为按钮使用单独的组件，尽管根据新的问题参数，这并不是真正必要的，但原理是相同的。将此组件用于按钮
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;
从“React”导入React；
从“react native”导入{View，StyleSheet，TouchableOpacity}
常量Btn=道具=>{
如果（道具触摸）{
返回(
{props.children}
);
}否则{
返回(
{props.children}
);
}
}
const styles=StyleSheet.create({
方框：{
填充：18，
背景颜色：'白色'，
边界半径：20
}
});
导出默认Btn；
<Btn style={styles.items} touch="on" onPress={props.getProductsRequest}>
<Text style={styles.itemTxt}> some thex</Text>
</Btn>
一些thex
注意touch=on您需要做的是存储按钮的活动状态，默认状态为第一个按钮的名称 一旦您这样做了，您就可以为选中的按钮设置一个活动类名
onClickactiveButtonconst 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;
const按钮\u数据=[
{
姓名：“姓名”，
值：“名称”
},
{
名称：“类”，
价值：“阶级”
},
{
姓名：“年龄”，
价值：“年龄”
},
{
名称：“受试者”，
价值观：“主体”
},
{
名称：“学校”，
价值：“学校”
}
];
功能Stddata（道具）{
常量[activeButton，setActiveButton]=useState（按钮数据[0]。名称）；
常量handleClick=e=>{
const name=e.target.name；
setActiveButton（名称）；
};
返回(
{button_Data.map（项=>{
const className=activeButton==item.name？“活动”：“；
返回(
{item.name}
);
})}
);
}
导出默认Stddata；
嘿。。这不是我现在正在寻找的每一个按钮点击颜色正在改变。。我想要的是点击哪个按钮该按钮的颜色应该改变，上一次应该恢复正常OK我调整了答案和代码沙盒。它在做你要求的事情。您可能需要调整按钮的“hover”类，因为当将鼠标悬停在活动按钮上时，它仍然显示为灰色。但是使用state和
setState