REACT：切换类 onClick，并调用其他函数答案

【问题标题】：REACT: toggle class onClick, and call other functionREACT：切换类 onClick，并调用其他函数
【发布时间】：2018-02-10 10:44:26
【问题描述】：

我是新手，所以请耐心等待 - 我确信这是一个简单的问题，但我很难找到解决方案。

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

我还需要根据点击的按钮打开一个面板。

到目前为止，我已经设法切换了单击按钮的类名，但无法弄清楚如何仅将其应用于被单击的按钮（参见下面的代码）

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

我已经尝试为按钮创建一个子组件并在组件内切换 className，但是我无法像在父组件中那样触发 openPanel() 函数。

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>
    )
  }

【讨论】：

感谢马里奥。您是指每个按钮的不同组件（我总共有大约 12 个），还是每个按钮重用一个组件？是否有其他方法可以向组件添加点击，它对我不起作用......例如。不会触发点击
每个按钮都有一个Button 实例。您需要将正确的道具传递给它，我更新了我的示例以反映这一点。
感谢 Mario F，说得通。这可行，但是，当单击新按钮时，如何从其他按钮中删除 active 类？
在这种情况下，我会将状态保留为父组件中的数组，将活动状态设置为被单击按钮的索引为 true，其余为 false。然后我会将正确的活动状态作为道具传递给每个按钮

【解决方案2】：

这是因为两个按钮的共同状态。

您可以存储数字，而不是为活动存储布尔值

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

然后点击操作

buttonClick(buttonNumber) {

    this.setState({
        isButtonActive: buttonNumber
    });

    openPanel(buttonNumber)
}

【讨论】：