gpt4 book ai didi

javascript - react : How to switch active class in buttons group?

转载 作者:行者123 更新时间:2023-11-30 23:57:45 25 4
gpt4 key购买 nike

我有两个按钮在组中。按任意按钮可使其处于事件状态,而另一个则处于非事件状态。第一次启动时没有按下任何按钮。现在,当按下任一按钮时,两个按钮都会变为事件状态。谁能帮忙解决一下吗?

import cn from 'classnames';
import React from 'react';

class BtnGroup extends React.Component {
constructor(props) {
super(props);
this.state = { active: false };
}

onChangeClass = () => {
const active = this.state.active;
this.setState({ active: !active });
};

render() {
const btnClass = cn({
'active': this.state.active,
});
return (
<div className="btn-group" role="group">
<button type="button" className={`btn btn-secondary left ${btnClass}`} onClick={this.onChangeClass}>Left</button>
<button type="button" className={`btn btn-secondary right ${btnClass}`} onClick={this.onChangeClass}>Right</button>
</div>
);
}
}

最佳答案

您需要区分您单击的是哪个按钮:

  onChangeClass = type => () => {
this.setState({ active: type });
};

然后在渲染中:

  render() {
return (
<div className="btn-group" role="group">
<button type="button" className={`btn btn-secondary left ${cn({
'active': this.state.active === 'left',
})}`} onClick={this.onChangeClass('left')}>Left</button>
<button type="button" className={`btn btn-secondary right ${cn({
'active': this.state.active === 'right',
})}`} onClick={this.onChangeClass('right')}>Right</button>
</div>
);
}

关于javascript - react : How to switch active class in buttons group?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60933829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com