反应中只有一个活动按钮
反应中只有一个活动按钮
提问于 2022-01-03 18:34:38
我有一个按钮列表。我想让他们中的一个拥有一个积极的状态，而当那个人拥有了所有其他的状态时，就不应该有这个状态。因此，样式设计只适用于活动的样式。我几乎做到了，我的意思是，当我按下对方时，它会改变样式，但我不知道当我单击另一个按钮时，如何使它关闭一个按钮。
贝娄是我的密码。props.planets是对象{id：'name‘的数组，标题：'name'}
MenuList它接受一个props.planets并生成MenuButton组件的列表
const MenuList = (props) => {
return (
<ul className={classes.planet_list}>
{props.planets.map((planet) => (
<MenuButton key={planet.id} title={planet.title} />
))}
</ul>
);
};MenuButton是我的按钮组件，我希望它有模块类:模块按钮作为主样式，类基于标题，以及active类if按钮是活动的。
const MenuButton = (props) => {
const [active, setActive] = useState();
const clickHandler = () => {
setActive({ active: props.title });
};
return (
<li>
<div
className={`${classes.menubutton} ${classes[props.title]} ${
active && classes.active
}`}
onClick={clickHandler}
>
{props.title}
</div>
</li>
);
};回答 2
Stack Overflow用户
回答已采纳
发布于 2022-01-03 18:49:59
您需要在父组件中而不是在子组件中具有活动状态。
MenuList.js
const MenuList = (props) => {
const [active, setActive] = useState();
function activeButton(value){
setActive(value)
}
return (
<ul className={classes.planet_list}>
{props.planets.map((planet) => (
<MenuButton onChange={activeButton} disabled={active} key={planet.id} title={planet.title} />
))}
</ul>
);
};MenuButton.js
const MenuButton = (props) => {
const clickHandler = (keyID) => {
props.onChange(keyID)
};
return (
<li>
<div
className={props.active === props.key ? "activeClass" : "inactiveClass"}
onClick={() => clickHandler(props.key)}
>
{props.title}
</div>
</li>
);
};应该是这样的。可能需要一个useEffect，但是让我知道任何错误
Stack Overflow用户
发布于 2022-05-22 16:17:09
是按钮上活动状态最简单的解决方案之一。为此，您需要有一个活动状态。，我希望这将帮助您！
const {useState,Fragment} = React;
const App = () => {
const [active, setActive] = useState("");
const handleClick = (event) => {
setActive(event.target.id);
}
return (
<Fragment>
<button
key={1}
className={active === "1" ? "active" : undefined}
id={"1"}
onClick={handleClick}
>
Solution
</button>
<button
key={2}
className={active === "2" ? "active" : undefined}
id={"2"}
onClick={handleClick}
>
By
</button>
<button
key={3}
className={active === "3" ? "active" : undefined}
id={"3"}
onClick={handleClick}
>
Jamal
</button>
</Fragment>
);
}
ReactDOM.render(
<App/>,
document.getElementById("react")
);.active{
background-color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70570025
复制相关文章
相似问题
腾讯云开发者
