我有五个动态创建的按钮。我的目标是：当单击任何按钮向其添加活动类时，当然，如果任何其他按钮具有该活动类以将其删除。我怎样才能做到这一点？
<div>
{buttons.map(function (name, index) {
return <input type="button" value={name} onClick={someFunct} key={ name }/>;
})}
</div>
ReactJs 向按钮添加活动类
IT技术
javascript
class
reactjs
2021-04-16 03:22:08
2个回答
您需要为组件引入状态并将其设置在onClick事件处理程序中。例如渲染方法的输出：
<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 })
}
添加活动类的最简单方法之一是设置状态并在每个开关上更改该状态，通过状态值您可以更改项目的活动类。
我在切换列表中的活动类时也遇到了同样的问题。
例子：
var Tags = React.createClass({
getInitialState: function(){
return {
selected:''
}
},
setFilter: function(filter) {
this.setState({selected : filter})
this.props.onChangeFilter(filter);
},
isActive:function(value){
return 'btn '+((value===this.state.selected) ?'active':'default');
},
render: function() {
return <div className="tags">
<button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
<button className={this.isActive('male')} onClick={this.setFilter.bind(this, 'male')}>male</button>
<button className={this.isActive('female')} onClick={this.setFilter.bind(this, 'female')}>female</button>
<button className={this.isActive('child')} onClick={this.setFilter.bind(this, 'child')}>child</button>
<button className={this.isActive('blonde')} onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
</div>
}
});
希望能帮到你！