我有“x”个依赖 API 调用的呈现的ArticlePreview组件。
<div className="wrapper">
<div className="flex-grid">
{ Object.keys(images).map((index, i) => { return (
<ArticlePreview onClick={(evt)=>this.props.clicked(evt, i)} img={images[index]} title={titles[index]} description={descriptions[index]} key={i}> </ArticlePreview>) }) }
</div>
</div>单击特定组件时，我可以更改 div 的颜色。
articleClicked =(evt, i) => { evt.currentTarget.style.backgroundColor = 'white'; }但是，当我单击另一个组件时，先前单击的颜色保持单击状态，如果我单击另一个组件，我希望将其更改为默认值。
通过利用
state management，您可以实现这一目标。请找到以下示例以供参考。避免DOM Manipulations并让 react 来处理。
const ArticlePreview = (props) => {
return(
<div className={props.class} onClick={props.onClick}>{props.article}</div>
)
}
class App extends React.Component {
constructor(props) {
super(props)
this.state={
selected: false,
article: ''
}
}
onSelectArticle = (article) => {
this.setState({
selected:true,
article:article
})
}
render() {
let articles = ['one', 'two', 'three']
return <div>
{
articles.map((article, index)=> <ArticlePreview key={index} class={(this.state.selected && (this.state.article === article)) ? 'bkcolor': 'default'} onClick={() => this.onSelectArticle(article)} article={article}/>)
}
</div>
}
}
ReactDOM.render( <App/> , document.getElementById("app")).default {
background: transparent
}
.bkcolor {
background: red
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>在您的情况下，将索引传递给处理程序并检查所选并匹配索引状态。
...
<ArticlePreview className={(this.state.selected && (this.state.index === index)) ? 'bkcolor': 'default'} onClick={()=>this.props.clicked(index)} img={images[index]} title={titles[index]} description={descriptions[index]} key={i}> </ArticlePreview>) }) }
...
作为 Dev 的答案，这是使用 React props 和 state 的更好方法。
有必要将 click Handler 函数传递给，div因为onClickprops 作用于DOM elementsbut React.Component。
这是我的例子，它与@Dev 的类似
您可以参考https://reactjs.org/docs/handling-events.html了解更多信息。