reagieren, ändern Sie die Klasse, die Liste auf klicken Sie auf

Ich habe einen reagieren element wie diesem:

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

Hier map gibt die Liste der filter Daten, wie ich wollte. Hier das, was ich Tue, ändert die Klasse aller element in der Liste wenn ich auf eine.

Ich bin immer der name der Klasse aus this.state.class

Wie kann ich die Klasse der einzige element, das ich geklickt habe..

Vielen Dank im Voraus ...

InformationsquelleAutor aryan | 2016-02-16
  1. 2

    Hielt ich es einmal.So haben Sie so viele divs und Sie wollen wissen, welche angeklickt wird.Mein Weg, um dieses problem zu lösen, ist die Angabe einer Parameter an die Funktion handleClick und Sie können das dom des div-während Sie klicken Sie auf die div.Wie diese:

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

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

    Dann haben Sie die Parameter für diese Funktion.Zwar können Sie mit der e.Ziel um den dom Ihres div-Element, welches geklickt wird.

    Gibt es einige Fehler in Ihrem code über die 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>
    )
  }
}

    Können Sie versuchen, diese und erzählen Sie mir nichts falsch.

    • Wo ich dont state.class.name dass ich will, die Klasse zu wechseln... und ja der div eindeutigen Namen mitkey parameter
    • Ich mache einige Fehler.Sie können nur erhalten, den dom und ändern Sie den Klassennamen von diesem dom.Sie können nicht ändern Sie die Klasse nicht direkt, aber ändern kann der Klassenname und Reagieren, geben Sie es der Klasse .
    • In meinem obigen code habe ich onClick Methode auf bestimmten Klasse. Ich bin nach deiner Idee dann aber wenn ich auf jede Klasse, es gibt target . Ich nehme an, es sollte nur return-Ziel der angeklickte div
    • Es tut nur Renditeziel von der angeklickte div.
    • Während das Ziel ist die div, die Sie geklickt haben,aber jeder Anteil eines Staates.So können Sie nicht mit der staatlichen Kontrolle der Klasse.
    • Ich meine, zu sagen, wo ich onClick auch , dass div sollten nur angeklickt werden, richtig, aber hier in jedem panel div klickte ich zurückgegeben, in Ziel..
    • Was ich will, ist, was Sie klicken Sie auf die div-wo habe ich onClick auch zurückgegeben werden soll und ich das ändern sollte, dass div von active
    • Ich mein code habe ich drei div mit der Klassen active panel-heading panel-body ... ich habe onClick Methode auf active div class aber wenn wenn ich auf panel-heading es ist mir seiner Klasse statt active Klasse. Was auch immer ich klicken sollte es wieder active Klasse
    • Das Ziel, die an Sie zurückgegeben wird, die eine, die die onClick-Funktion.Haben Sie versucht, den code, den ich dir geben?

    InformationsquelleAutor Winsky Wen
Schreibe einen Kommentar