React JS - 单击更改颜色并将默认颜色放在所有其他颜色上答案

【问题标题】：React JS - Change color on click and put defaul color on all other onesReact JS - 单击更改颜色并将默认颜色放在所有其他颜色上
【发布时间】：2018-02-23 09:42:05
【问题描述】：

我有“x”个渲染的 ArticlePreview 组件，这些组件取决于 API 调用。

<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) =&gt; { evt.currentTarget.style.backgroundColor = 'white'; }

但是当我点击另一个组件时，点击之前的颜色保持点击状态，如果我点击另一个组件，我希望它可以将其更改为默认值。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

通过利用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>) }) }
 ...

【讨论】：

【解决方案2】：

作为 Dev 的回答，这是使用 React 道具和状态的更好方法。

有必要将 click Handler 函数传递给div，因为onClick props 适用于DOM elements 但React.Component。

这是my example 和@Dev's 类似

您可以参考https://reactjs.org/docs/handling-events.html了解更多信息。

【讨论】：

为我的问题使用了您的解决方案。谢谢！