反應：切換類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（波納恩特）。

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

來源

2017-09-01 ronnie burns

的問題是，你共享的兩個按鈕相同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> 
    ) 
    }

來源

2017-09-01 11:15:19

感謝馬里奧。你的意思是每個按鈕有不同的組件（我總共有大約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) 
}

來源

2017-09-01 11:55:38

反應：切換類onClick，並調用其他功能

回答

相關問題