javascript - REACT : toggle class onClick, 并调用其他函数

Question

我是新手，所以请耐心等待 - 我确信这是一个简单的问题，但我在找出解决方案时遇到了很多麻烦。

我有一组按钮，单击它们时，我会向该按钮添加一个“事件”类名，并将其从可能处于事件状态的任何其他按钮中删除。

我还需要打开一个面板，其中包含基于单击哪个按钮的内容。

到目前为止，我已经设法切换被点击按钮的类名，但无法弄清楚如何只将它应用于被点击的按钮(见下面的代码)

<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() 函数。

我希望这是有道理的 - 提前谢谢你:)

Answer 1

问题是您为两个按钮共享相同的 state，因此当您更改一个按钮时，另一个按钮也会更改。您应该将按钮包装在不同的组件中，以便它们具有不同的状态。

如果您需要调用父组件中的回调，将其传递给按钮组件，以便它们也可以触发。

按钮看起来像这样:

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>
    )
  }
}

父组件的样子:

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>
    )
  }