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 })
}