如何用React.js添加一个类?
问题描述:
点击按钮后我需要添加活动类并删除所有其他活动类。
I need add class "active" after click to button and remove all other "active" classes.
请看这里: https://codepen.io/azat-io/pen/RWjyZX
var Tags = React.createClass({
setFilter: function(filter) {
this.props.onChangeFilter(filter);
},
render: function() {
return <div className="tags">
<button className="btn active" onClick={this.setFilter.bind(this, '')}>All</button>
<button className="btn" onClick={this.setFilter.bind(this, 'male')}>male</button>
<button className="btn" onClick={this.setFilter.bind(this, 'female')}>female</button>
<button className="btn" onClick={this.setFilter.bind(this, 'child')}>child</button>
<button className="btn" onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
</div>
}
});
var Kid = React.createClass({
render: function() {
return <ul>
<li>{this.props.name}</li>
</ul>
}
});
var List = React.createClass({
getInitialState: function() {
return {
filter: ''
};
},
changeFilter: function(filter) {
this.setState({
filter: filter
});
},
render: function() {
var list = this.props.Data;
if (this.state.filter !== '') {
list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);
console.log(list);
}
list = list.map(function(Props){
return <Kid {...Props} />
});
return <div>
<h2>Kids Finder</h2>
<Tags onChangeFilter={this.changeFilter}/>
{list}
</div>
}
});
var options = {
Data: [{
name: 'Eric Cartman',
tags: ['male', 'child']
},{
name: 'Wendy Testaburger',
tags: ['female', 'child']
},{
name: 'Randy Marsh',
tags: ['male']
},{
name: 'Butters Stotch',
tags: ['male', 'blonde', 'child']
},{
name: 'Bebe Stevens',
tags: ['female', 'blonde', 'child']
}]
};
var element = React.createElement(List, options);
React.render(element, document.body);
如何在这里做得更好?
答
这很简单。
看看这个
It is simple. take a look at this
https: //codepen.io/anon/pen/mepogj?editors=001
基本上你想要处理组件的状态,以便检查当前活动状态一。你需要包括
basically you want to deal with states of your component so you check the currently active one. you will need to include
getInitialState: function(){}
//and
isActive: function(){}
查看链接上的代码