完整es6代碼如下拴疤，實(shí)現(xiàn)類似于button切換效果
import React, {
Component
} from 'react';
// 一觸發(fā)setState就會重新渲染render 組件 初始渲染的時候第一個li 相等，所以class為focused度气，后面的為
// 點(diǎn)到第二個li 觸發(fā)setState focused變?yōu)?
export default class Tab extends Component {
state = {
focused: 0
};
handleClick = (index) => {
this.setState({
focused: index
});
};
render() {
const items = ['webpack', 'react', 'babel', 'npm'];
const {
focused
} = this.state;
var that = this;
return (
<div className='content'>
<ul>
{
items.map(function(item,index){
return (<li key={index}
className={focused === index ? 'focused ': 'normal'}
onClick={that.handleClick.bind(null,index)}
>{item}</li>)
})
}
</ul>
</div>
)
}
}
export default Tab
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
