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

中的道具下提供

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功能以保持上下文，你可以使用bind或其他方法，所以this.handleClick会引用类函数

使用ReactJS切换：活动类

1 个答案: