在单击时react更改列表项的类别

IT技术 reactjs
2021-05-12 03:21:54

我有一个像这样的react元素：

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

如何更改我单击的唯一元素的类..

提前致谢 ...

1个回答

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

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

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

其它你可能感兴趣的问题
上一篇react-router - 链接主页上的 activeClassName 下一篇如何在 React 的循环中触发“this”