Question

我有一个像这样的反应元素：

import React, { PropTypes, Component } from 'react'

class AlbumList extends Component {

  constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick() {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }

  render() {
    var album_list
    const {user} = this.props
    if(user.data){

        list = user.data.filter(album => album.photos).map((album => {
                        return  <div className={"col-sm-3"} key={album.id}>
                        <div className={this.state.class} key={album.id} onClick={this.handleClick.bind(this)}>
                          <div className={"panel-heading"}>{ album.name }</div>
                          <div className={"panel-body"}>
                            <img className={"img-responsive"} src={album.photo.source} />
                          </div>
                                </div>
                        </div>
                         }))
                 }

    return (
      <div className={"container"}>
        <div className="row">
          {list}
        </div>
      </div>
    )
  }
}

export default AlbumList

此处map提供了我想要的filter数据列表。这里我正在做什么改变了所有列表元素的类，如果我点击一个。

我从this.state.class

获取了班级名称

如何更改我点击过的元素的类..

提前致谢...

Answer 1

我已经考虑过了一次。所以你有这么多div，你想知道哪个被点击。我解决这个问题的方法是给函数handleClick一个参数，你可以得到div的dom而你点击div。就像这样：

array.map(function(album,index){
  return <div onClick={this.handleClick}/>
})

handleClick(e){
  console.log(e.target);
  e.target.className = 'active';
  ...
}

然后你有一个这个函数的参数。虽然你可以使用e.target获取被点击的div的dom。

你的代码中有一些关于state.class的错误。

class AlbumList extends Component {
  constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(e) {
    if(e.target.class === 'active'){
      e.target.className = 'album'
    }else{
      e.target.className = 'active'
    }
  }

  render() {
    var album_list
    const {user} = this.props
    if(user.data){
      list = user.data.filter(album => album.photos).map((album => {
        return (
          <div className={"col-sm-3"} key={album.id}>
            <div className='active' key={album.id} onClick={this.handleClick.bind(this)}>
              <div className={"panel-heading"}>{ album.name }</div>
              <div className={"panel-body"}>
                <img className={"img-responsive"} src={album.photo.source} />
              </div>
            </div>
          </div>
        )
      }))
    }
    return (
      <div className={"container"}>
        <div className="row">
          {list}
        </div>
      </div>
    )
  }
}

你可以尝试这个并告诉我任何错误。

在点击时更改列表项的类别

1 个答案: