使用 ReactJS 切换 :active 类

Question

我正在实现一个引导屏幕，用户在该屏幕中选择 3 个以上的项目，并且在用户单击它后，一个紫色的叠加层会保留下来。

像这样：

这是我的代码：

var RepeatModule = React.createClass({
   getInitialState: function() {
      return { items: this.props.items || [] }
   },
   componentWillMount: function() {
     console.log("componentWillMount()")
     this.setState({ items : data })
     console.log(data,"data is here");
   },
   handleClick: function (e, item) {
    this.setState({active: true});
   },
   render: function() {
      var listItems = this.state.items.map(function(item) {
         return (
            <ListItem item={item}/>
         );
      });
      return (
         <div className="flex-container">
             {listItems}
         </div>
      );
   }
});
/* make the items stateless */
var ListItem = function(props) {
    var backgroundImage = {
      backgroundImage: 'url(' + props.item.pictureURL + ')'
    };
     return (
         <div className="block-grid-item">
          <a className="display-block card text-gray-darker">
            <div onClick={handleClick} style={backgroundImage} className="card-img-wrap m-xs-0 placeholder placeholder-landscape">
            </div>
            <div className="card-meta">
              <div className="vesta-hp-gifts-card-title text-gray-darker">{props.item.storeName}</div>
            </div>
          </a>
        </div>
     );
}

我尝试在我的 handleClick 函数中保持活动状态时遇到问题。

这是我的悬停 CSS 效果

.card-img-wrap::after
  {
    background-color: #000;
    bottom: 0px;
    content: "";
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .card-img-wrap:hover::after
  {
    background-color: #000;
    bottom: 0px;
    content: "";
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0.6;
    background-color: #5450DC;
  }

为什么这不起作用？如何做到这一点？

Answer 1

您必须将属性传递给 ListItem，例如handleClick：

   render: function() {
      var listItems = this.state.items.map(function(item) {
         return (
            <ListItem handleClick={this.handleClick} item={item}/>
         );
      });
      return (
         <div className="flex-container">
             {listItems}
         </div>
      );
   }

然后它将在ListItem中的props下可用

var ListItem = function(props) {
    var backgroundImage = {
      backgroundImage: 'url(' + props.item.pictureURL + ')'
    };
     return (
         <div className="block-grid-item">
          <a className="display-block card text-gray-darker">
            <div onClick={props.handleClick} style={backgroundImage} className="card-img-wrap m-xs-0 placeholder placeholder-landscape">
            </div>
            <div className="card-meta">
              <div className="vesta-hp-gifts-card-title text-gray-darker">{props.item.storeName}</div>
            </div>
          </a>
        </div>
     );
}

你应该使用 active 属性，或者在 ListItem 中控制它，或者通过父属性传递它（取决于你的需要），根据这个属性你应该添加/删除类名。

jsFiddle：https://jsfiddle.net/69z2wepo/67316/

请注意，我正在使用 ES6 功能以保留上下文，您可以使用绑定或其他方法，因此 this.handleClick 将引用类函数