如何用React.js添加一个类
How to add a class with React.js?
我需要在点击按钮并删除所有其他active
类后添加active
类。
请看这里: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);
我怎样才能做得更好?
很简单。看看这个
https://codepen.io/anon/pen/mepogj?编辑= 001
基本上你想处理你的组件的状态,所以你检查当前活动的那个。您需要包含
getInitialState: function(){}
//and
isActive: function(){}
查看链接上的代码
这很有用:
https://github.com/JedWatson/classnames你可以这样做
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
或者像这样使用
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
摘自他们的网站
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}
https://reactjs.org/docs/faq-styling.html 既然你已经有了<Tags>
组件调用父组件上的函数,你不需要额外的状态:只需将过滤器传递给<Tags>
组件作为道具,并在渲染按钮时使用它。像这样:
将<Tags>
组件中的渲染函数更改为:
render: function() {
return <div className = "tags">
<button className = {this._checkActiveBtn('')} onClick = {this.setFilter.bind(this, '')}>All</button>
<button className = {this._checkActiveBtn('male')} onClick = {this.setFilter.bind(this, 'male')}>male</button>
<button className = {this._checkActiveBtn('female')} onClick = {this.setFilter.bind(this, 'female')}>female</button>
<button className = {this._checkActiveBtn('blonde')} onClick = {this.setFilter.bind(this, 'blonde')}>blonde</button>
</div>
},
并在<Tags>
中添加一个函数:
_checkActiveBtn: function(filterName) {
return (filterName == this.props.activeFilter) ? "btn active" : "btn";
}
在<List>
组件内部,将过滤器状态作为prop传递给<tags>
组件:
return <div>
<h2>Kids Finder</h2>
<Tags filter = {this.state.filter} onChangeFilter = {this.changeFilter} />
{list}
</div>
那么它应该按预期工作。在这里编码(希望链接有效)
您也可以使用纯js来完成此操作,就像使用jquery的旧方法一样
如果你想要一个简单的方法,试试这个
警告:这可能不是react中正确的操作方式。
document.getElementById("myID").classList.add("show-example");
const activeState = (e)=>{
var id = e.target.id
const idArray = ["homeBtn","aboutBtn","servicesBtn","portfolioBtn","testmBtn","blogBtn","contactBtn"]
idArray.forEach((element)=> {
document.getElementById(element).classList.remove("active")
});
console.log(id);
document.getElementById(id).classList.add("active")
}
相关文章:
- 如何用另一个Javascript更改Javascript函数值
- AngularJS:如何用同一对象的另一个属性访问一个属性
- Javascript.如何用javascript将信息发送到另一个网站
- 如何用jquery动画改变背景颜色,就像一个过渡
- Node.js如何用一个线程处理同时请求
- 如何用D3添加一个简单的圆弧
- 如何用javascript发送多个文件没有jQuery我想要每个文件一个进度条
- 在JavaScript中,如何用一个字符替换字符串中的所有字母
- 如何用一个函数获取所有javascript变量
- 如何用不同的id激发一个函数's
- 如何用一个html5音频播放器播放多个音频文件
- 如何用javascript从数组中删除项?我想要一个类似拉的东西来做与推相反的事情
- 如何用另一个元素替换一个元素
- 如何用变量定义一个数组,然后用一个数字填充每个数组
- 如何用时钟重复一个javascript函数
- 如何用一个按钮或链接切换音频播放() pause()
- 如何用一个单词替换每个单词
- 如何用从另一个struts2 jquery自动补全器Y中选择的值重新加载struts2 jquery自动补全机X
- 如何用一个合适的双引号替换这个看起来很奇怪的引号符号:“;
- 如何用javascript创建一个具有结果集值的数组