ReactJS so fügen Sie eine Karte mehr/weniger Taste

Ich bin neu, zu Reagieren und zu möchte ich hinzufügen, dass ein einfaches "mehr Anzeigen" - button in meiner Anwendung. Ich habe ein array mit Daten, wo ich will, um zu zeigen, 3 Einträge als Vorgabe. Wenn ein Benutzer klickt auf show more, der rest der Daten dargestellt werden soll, und die Schaltfläche sollte den text ändern in show less. Ich bin mir nicht genau sicher, wie es zu tun.

Dies ist, was ich so weit gekommen:

class Application extends React.Component {
  constructor() {
    super()

    this.cars = [
     { "name" : "Audi", "country" : "Germany"},
     { "name" : "BMW", "country" : "Germany" },
     { "name" : "Chevrolet", "country" : "USA" },
     { "name" : "Citroen", "country" : "France" },
     { "name" : "Hyundai", "country" : "South Korea" },
     { "name" : "Mercedes-Benz", "country" : "Germany" },
     { "name" : "Renault", "country" : "France" },
     { "name" : "Seat", "country" : "Spain" },
   ]

   this.isLoaded = false

  }

  showMore() {
   //show more entries
   //switch to "show less"
  }

  render() {
    return <div className="container">
     <h3>Click show more to see more data</h3>
     <div className="row">
       <h3>List of Cars</h3>
       <ul>
         {this.cars.slice(0,3).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
       </ul>
     </div>
     <p>
      <a className="btn btn-primary" onClick={this.showMore()}>Show more</a>.
     </p>
   </div>;
  }
}

React.render(<Application />, document.getElementById('app'));

Hier ist ein JSBin mit dem code in Aktion

Kann mir jemand helfen?

isLoaded sollte in Ihrem Bundesland. Aktualisieren Sie Ihr rendering, rufen Sie setState. Sie hätten einen "Staat.itemNumber", dass Sie das update auf die Länge, wenn Sie anrufen showMore. In Ihrem JSX, slice (0, Zustand.itemNumber) und du bist gut

InformationsquelleAutor ST80 | 2017-06-05

javascript reactjs

Hier ist eine Lösung. JSBin hier

Erste, alle Ihre Daten der Komponente in seine state.

this.state = {
  cars: [
    { "name" : "Audi", "country" : "Germany"},
    { "name" : "BMW", "country" : "Germany" },
    { "name" : "Chevrolet", "country" : "USA" },
    { "name" : "Citroen", "country" : "France" },
    { "name" : "Hyundai", "country" : "South Korea" },
    { "name" : "Mercedes-Benz", "country" : "Germany" },
    { "name" : "Renault", "country" : "France" },
    { "name" : "Seat", "country" : "Spain" },
  ],
  itemsToShow: 3,
  expanded: false
}

this.showMore = this.showMore.bind(this);

Verwenden wir itemsToShow zu wissen, wie viele Elemente zu zeigen, wenn nicht erweitert werden. Wir können eine expanded variable zu ändern, die Taste text auf der Grundlage der Aktion durch den Benutzer. Wir sind auch dann verbindlich showMore auf diese Komponente, so dass die Taste weiß, von welcher Komponente die Methode aufrufen, wenn darauf geklickt wird.

In unserem erbringen, lassen Sie uns ein paar Dinge ändern, wie so

<ul>
  {this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => 
    <li key={i}>{car.name} - {car.country}</li>
  )}
</ul>

Wir gehen zum Rendern von 0 bis jedoch viele itemsToShow wir haben. Dann ändern wir die button-text je nach expanded Wert wie so

<a className="btn btn-primary" onClick={this.showMore}>
  {this.state.expanded ? (
    <span>Show less</span>
  ) : (
    <span>Show more</span>
  )}
</a>.

Schließlich schreiben wir die showMore Methode, tatsächlich ändert sich der Wert von itemsToShow.

showMore() {
  this.state.itemsToShow === 3 ? (
    this.setState({ itemsToShow: this.state.cars.length, expanded: true })
  ) : (
    this.setState({ itemsToShow: 3, expanded: false })
  )
}

Sehr Schön! Danke! 🙂

InformationsquelleAutor glhrmv

Du einiges falsch machen. Sie müssen verstehen, was ein Staat ist und wie Sie reagieren, mit ihm interagieren. Wenn ein Staat sich ändern, Ihre render-Funktion wird erneut aufgerufen, es Ihnen ermöglichen, dynamische rendering basierend auf Ihren aktuellen Status.

Ersten initialisieren Sie Ihren Zustand mit, was Sie wollen (hier, ich hätte nur rowsToDisplay, aber ich denke, Sie wollen in der Lage sein, um aktualisieren Sie Ihre Autos auch).

Sollten Sie binden Sie diese auf Ihre Funktion showMore so, wenn es aufgerufen wird, es zu bekommen, dass "diese" bezieht sich auf die Komponente.

OnClick, showMore aufgerufen wird; die Funktion aktualisieren Sie Ihren Status. Durch die Aktualisierung ist es, das Rendern wird wieder aufgerufen werden (erinnern Sie sich, dass eine änderung in Ihrem Zustand zu nennen, Rendern Sie erneut mit Ihrem neuen Werten). Dies sollte der einzige Weg für Sie, um die Ansicht zu aktualisieren.

class Application extends React.Component {
  constructor(props) {
    super(props)

    this.state = {cars : [
      { "name" : "Audi", "country" : "Germany"},
      { "name" : "BMW", "country" : "Germany" },
      { "name" : "Chevrolet", "country" : "USA" },
      { "name" : "Citroen", "country" : "France" },
      { "name" : "Hyundai", "country" : "South Korea" },
      { "name" : "Mercedes-Benz", "country" : "Germany" },
      { "name" : "Renault", "country" : "France" },
      { "name" : "Seat", "country" : "Spain" },
    ],    
    rowsToDisplay : 4};
    this.showMore = this.showMore.bind(this);
  }

  showMore() {
    let carLength = this.state.cars.length;
    this.setState({rowsToDisplay:carLength});
    //show more entries
    //switch to "show less"
  }
  render() {
    return <div className="container">
      <h3>Click show more to see more data</h3>
      <div className="row">
        <h3>List of Cars</h3>
        <ul>
          {this.state.cars.slice(0,this.state.rowsToDisplay).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
        </ul>
      </div>
      <p>
        <a className="btn btn-primary" onClick={this.showMore}>Show more</a>.
      </p>
    </div>;
  }
}

React.render(<Application />, document.getElementById('app'));

Fühlen Sie sich frei, Fragen zu stellen, aber bitte Lesen Sie den doc zuerst :
https://facebook.github.io/react/docs/state-and-lifecycle.html

InformationsquelleAutor Nevosis

JS:

class Application extends React.Component {
  constructor() {
    super()
    this.state = {
      loadMore: false
    }
    this.cars = [
     { "name" : "Audi", "country" : "Germany"},
     { "name" : "BMW", "country" : "Germany" },
     { "name" : "Chevrolet", "country" : "USA" },
     { "name" : "Citroen", "country" : "France" },
     { "name" : "Hyundai", "country" : "South Korea" },
     { "name" : "Mercedes-Benz", "country" : "Germany" },
     { "name" : "Renault", "country" : "France" },
     { "name" : "Seat", "country" : "Spain" },
   ]

   this.isLoaded = false

  }

  showMore() {
   //show more entries
   //switch to "show less"
   this.setState({loadMore: true})
  }

  render() {
    const loadCount = this.state.loadMore ? this.cars.length : 3;
    return (
    <div className="container">
     <h3>Click show more to see more data</h3>
     <div className="row">
       <h3>List of Cars</h3>
       <ul>
         {this.cars.slice(0,loadCount).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
       </ul>
     </div>
     <p>
      <a> className="btn btn-primary" onClick={this.showMore()}>Show more</a>
     </p>
   </div>
   );
  }
}

React.render(<Application />, document.getElementById('app'));

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

verwenden Sie dieses.setState() ihn neu zu Rendern der Komponente!

InformationsquelleAutor menq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.