Question

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

我有一组按钮，当他们点击它时我添加了一个“活跃的”按钮。 className到该按钮，并将其从可能处于活动状态的任何其他按钮中删除。

我还需要根据点击的按钮打开包含内容的面板。

到目前为止，我已设法切换单击按钮的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)
}

我已尝试为按钮创建子组件并在组件中切换className，但之后我无法触发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>
    )
  }

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

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

2 个答案: