如何在React中刪除/添加大量按鈕（或任何DOM元素）的類？

Question

我有很多按鈕想要刪除/添加類。 主要是，如果已選擇它們，我想向它們添加一個“選定”類。 我不想創建10個不同的狀態變量和10個不同的處理程序來設置狀態，以更改每個按鈕上的類。 有其他方法可以做到這一點嗎？ 目前，我的操作方式是：

var button1Class = ClassNames({'selected': this.state.button1Selected})
<button className={button1Class} onClick={this.handleButton1Clicked} />

handleButton1Clicked: function() {
  this.setState({
     button1Selected: !this.state.button1Selected
   });
}

。 。 。 （按鈕2-9）

var button10Class = ClassNames({'selected': this.state.button10Selected})
<button className={button10Class} onClick={this.handleButton10Clicked} />

handleButton10Clicked: function() {
  this.setState({
     button10Selected: !this.state.button10Selected
   });
}

這似乎太冗長，而且似乎是錯誤的。 但是我找不到其他辦法。 有什么建議么？

Answer 1

您可以做一些事情使您的代碼更加干燥。 我們可以嘗試將一些常用功能納入更通用的功能，並在需要時進行循環。

首先，您可以設置一個帶有參數的按鈕處理程序：

handleButtonClick: function(index) {
    var property = 'button'+index+'Selected';
    var newState = {};
    newState[property] = !this.state[property];
    this.setState(newState);
}

然后，在渲染過程中循環，動態訪問屬性：

var buttons = [];
for ( var i = 1; i <= 10; i++ ) {
    var className = ClassNames({
        'selected': this.state['button'+i+'Selected']
    });
    buttons.push((
        <button className={className} onClick={this.handleButtonClick.bind(this, i)} />
    ));
}