反应：切换类onClick，并调用其他功能

问题描述：

我是新来的反应，所以请耐心 - 我敢肯定这是一个简单的问题，但我很难找出解决方案。反应：切换类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（波纳恩特）。

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

答

的问题是，你共享的两个按钮相同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”实例。您需要将正确的道具传递给它，我更新了我的示例以反映这一点。 –

感谢马里奥F，有道理。这有效，但是，如何在单击新按钮时从其他按钮中删除'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>

，并点击动作

buttonClick(buttonNumber) { 

    this.setState({ 
     isButtonActive: buttonNumber 
    }); 

    openPanel(buttonNumber) 
}

反应：切换类onClick，并调用其他功能

相关推荐