如何为React中的许多按钮(或任何DOM元素）移除/添加类

How do you remove/add classes for a lot of buttons(or any DOM elements) in React?

本文关键字：元素 DOM 任何 移除 添加 React 按钮 许多      更新时间：2023-09-26

我有很多按钮想删除/添加类。主要是，如果它们已经被选中，我想向它们添加一个"selected"类。我不想创建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
   });
}

这似乎太过冗长，而且似乎是错误的。但我想不出其他办法了。有什么建议吗？

您可以做一些事情来使代码更加DRY。我们可以尝试将一些常见的功能拉到一个更通用的函数中，并在需要的地方进行循环。

首先，您可以设置一个接受参数的按钮处理程序：

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)} />
    ));
}
相关文章：