javascript REACT：切换类 onClick，并调用其他函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45999031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
REACT: toggle class onClick, and call other function
提问by ronnie burns
I am new to react so please be patient - I'm sure this is a simple problem but I am having a lot of trouble figuring out a solution.
我是新手，所以请耐心等待 - 我确定这是一个简单的问题，但我很难找到解决方案。
I have a set of buttons, when they are clicked I add an 'active' className to that button and remove it from any other buttons that might be active.
我有一组按钮，当它们被单击时，我向该按钮添加一个“活动”类名，并将其从可能处于活动状态的任何其他按钮中删除。
I also need to open a panel with content based on which button is clicked.
我还需要根据单击的按钮打开一个包含内容的面板。
So far I have managed to toggle the className of the clicked button, but can't figure out how to only apply it to the button that is clicked (see code below)
到目前为止，我已经成功地切换了被点击按钮的 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>
and the function to toggle the active state and open appropriate panel based on the button clicked:
以及根据单击的按钮切换活动状态并打开相应面板的功能：
buttonClick(buttonNumber) {
this.setState(prevState => ({
isButtonActive: !prevState.isButtonActive
}));
openPanel(buttonNumber)
}
I have experimented with creating a child component for the button and toggling the className within the component, but then I can't trigger the openPanel() function as it is in the parent component.
我已经尝试为按钮创建一个子组件并在组件内切换 className，但是我无法触发 openPanel() 函数，因为它在父组件中。
I hope that makes sense - thank you in advance :)
我希望这是有道理的 - 提前谢谢你:)
回答by Mario F
the problem is that you are sharing the same statefor both buttons, so when you change it for one, it changes for the other. You should wrap your buttons in different components so that they have different state.
问题是您state对两个按钮共享相同的按钮，因此当您更改一个按钮时，它也会更改另一个。您应该将按钮包装在不同的组件中，以便它们具有不同的状态。
If you need a callback in the parent component to be called, pass it to the button components so that they can trigger that as well.
如果您需要调用父组件中的回调，请将其传递给按钮组件，以便它们也可以触发该回调。
The button could look like this:
该按钮可能如下所示：
class Button extends React.Component {
constructor () {
super()
this.state = { isButtonActive: false }
this.onClick = this.onClick.bind(this)
}
onClick () {
this.setState({
isButtonActive: !this.state.isButtonActive
})
this.props.openPanel(this.props.buttonNumber)
}
render () {
return (
<button onClick={this.onClick()} className={this.state.isButtonActive ? 'active' : null}>button text</a>
)
}
}
how the parent component could look like:
父组件的样子：
class Parent extends React.Component {
onButtonClicked (number) {
console.log(`Button ${number} was clicked`)
}
render () {
return (
<div>
<Button buttonNumber={1} openPanel={this.onButtonClicked} />
<Button buttonNumber={2} openPanel={this.onButtonClicked} />
</div>
)
}
回答by Shubham Khatri
This happens because of the common state for both the button.
发生这种情况是因为两个按钮的状态相同。
Instead of storing a boolean value for active, you can store the numeral like
您可以存储数字，而不是为 active 存储布尔值
<a onClick={this.buttonClick(1)} className={this.state.isButtonActive === 1 ? 'active' : null}>button text</a>
<a onClick={this.buttonClick(2)} className={this.state.isButtonActive === 2 ? 'active' : null}>button text</a>
and Click action to
并单击操作
buttonClick(buttonNumber) {
this.setState({
isButtonActive: buttonNumber
});
openPanel(buttonNumber)
}
