我是新来的反应,所以请耐心 - 我敢肯定这是一个简单的问题,但我很难找出解决方案。反应:切换类onClick,并调用其他功能
我有一组按钮,当他们被点击时,我添加一个'active'className到那个按钮,并从任何其他可能被激活的按钮中删除它。
我还需要打开一个面板,其内容基于哪个按钮被点击。
到目前为止,我已经成功地切换点击的按钮的类名,但无法弄清楚如何只把它应用到被点击的按钮(见下面的代码)
<a onClick={this.buttonClick(1)} className={this.state.isButtonActive ? 'active' : null}>button text</a>
<a onClick={this.buttonClick(2)} className={this.state.isButtonActive ? 'active' : null}>button text</a>
和功能切换基础上的按钮,激活状态和开放相应的面板点击:
buttonClick(buttonNumber) {
this.setState(prevState => ({
isButtonActive: !prevState.isButtonActive
}));
openPanel(buttonNumber)
}
我已经尝试创建按钮子组件和组件内切换的类名,但我不能触发openPanel ()函数,因为它在父com中Ponent(波纳恩特)。
我希望是有道理的 - 谢谢你提前:)
感谢马里奥。你的意思是每个按钮有不同的组件(我总共有大约12个),或者每个按钮重用了一个组件?是否有添加点击到组件的不同方法,它不适用于我...例如。 不会触发点击 –
您为每个按钮都有一个“Button”实例。您需要将正确的道具传递给它,我更新了我的示例以反映这一点。 –
感谢马里奥F,有道理。这有效,但是,如何在单击新按钮时从其他按钮中删除'active'类? –