我有一个在 react 中使用数组创建的元素列表。在用户单击时，如何使单击的元素处于活动状态（通过添加 CSS 类）同时使其他元素处于非活动状态（通过删除活动类）？
我的元素渲染是这样的。
{this.props.people.map(function(person, i){
<div className='media' key={i} onClick={state.handleClick.bind(state,i,state.props)}>
<item className="media-body">{person.name}</item>
</div>
}
当用户单击这些元素之一时，将向单击的“媒体”元素添加一个活动类，使单击的元素成为“媒体活动”，同时从先前单击的元素中删除“活动”类？？
【问题讨论】：
标签： javascript jquery css reactjs
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
}
handleClick(index, props) {
// do something with props
// ...
// now update activeIndex
this.setState({ activeIndex: index });
}
render() {
return (
<div>
{
this.props.people.map(function(person, index) {
const className = this.state.activeIndex === index ? 'media active' : 'media';
return (
<div className={className} key={index} onClick={handleClick.bind(this, index, this.props)}>
<item className="media-body">{person.name}</item>
</div>
);
}, this)
}
</div>
);
}
【讨论】：
为了简洁的代码，我个人建议您创建子组件以向映射元素添加功能。
你可以创建一个小的子组件，它只返回你想要添加功能的元素，就像这样：
...
this.state = {
active: false
}
...
return(
<div className=`media ${this.state.active ? 'active' : ''` onClick={()=>{this.setState({active: true})}}>
<item className="media-body">{this.props.name}</item>
</div>
)
...
在您的地图函数中，您只需将内容作为属性传递：
{this.props.people.map(function(person, i){
<SubComponent key={i} {...person} />
}
这样您就可以在“根”组件中保留干净的代码，并且可以增加子组件的复杂性。
【讨论】：
在您的 handleClick 方法中，您可以在组件的状态中存储被点击的人（看起来集合是人）。然后根据人的 id 有条件地设置 className。
您可以使用以下方式设置类名：
className={this.state.clickedPersonId === i ? 'media media--clicked' : 'media'}
(注意这里使用的是 i，即 people 数组中项目的索引；您可能希望使用更明确的内容，例如人员的真实 ID .)
【讨论】：