ReactJs向按钮添加活动类

Question

我有五个按钮，是动态创建的。我的目标是：单击任何按钮以向其中添加活动类，当然还有其他任何人可以通过该活动类将其删除。我该如何实现？

<div>
    {buttons.map(function (name, index) {
        return <input type="button" value={name} onClick={someFunct} key={ name }/>;
   })}
</div>

Answer 1

您需要将状态引入组件并在onClick事件处理程序中进行设置。例如render方法的输出：

<div>
    {buttons.map(function (name, index) {
        return <input
                 type="button"
                 className={this.state.active === name ? 'active' : ''}
                 value={name}
                 onClick={() => this.someFunct(name)}
                 key={ name } />;
   })}
</div>

事件处理程序（元素方法）：

someFunct(name) {
    this.setState({ active: name })
}