Question

我有＆＃34; x＆＃34;依赖于API调用的已呈现 ArticlePreview 组件的数量。

＆＃13;

<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>

＆＃13;

点击它时，我可以从特定组件更改div的颜色。

＆＃13;

articleClicked =(evt, i) => { evt.currentTarget.style.backgroundColor = 'white'; }

＆＃13;

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

Answer 1

通过利用state management，您可以实现这一目标。请参考以下样本以供参考。避免DOM Manipulations，让我们做出反应。

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>) }) }
 ...

Answer 2

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

有必要将点击处理程序功能传递给div，因为onClick道具适用于DOM elements但React.Component。

这是my example，它与@Dev的

类似

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

React JS - 改变点击颜色并将defaul颜色放在所有其他颜色上

2 个答案: