React ES6 onClick andere Komponenten ändern

Question

Ich baue eine Tabelle, die eine normale Zeile und dann zwei Zeilen dahinter hat, die ausgeblendet sind, bis das Plus-Symbol angeklickt wird. Wenn auf das Symbol geklickt wird, sollte es sich zu einem Minus ändern und die versteckten Zeilen sollten CSS-Klassen ändern. Auch sollte umgekehrt funktionieren.

import React from 'react'; 

class HiddenRow extends React.Component { 
    render() { 
    return (
     <tr className="hidden-row"> 
     <td>Stuff</td> 
     </tr> 
    ); 
    } 
} 

class NormalRow extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    console.log('here'); 
    // Expand rows if hidden change icon to fa-minus-circle 
    // Hide rows if not and change icon to fa-plus-circle 
    } 

    render() { 
    return (
     <tr> 
     <td><i className="fa fa-plus-circle" onClick={this.handleClick}></i> Hello</td> 
     </tr> 
    ); 
    } 
} 

class ParentDiv extends React.Component { 
    render() { 
    return (
     <div> 
     <table> 
      <tbody> 
      <NormalRow /> 
      <HiddenRow /> 
      <HiddenRow /> 
      <NormalRow /> 
      <HiddenRow /> 
      <HiddenRow /> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
} 

Edit: Die Tabelle wird mehrere Sätze von normalen Zeilen und versteckte Reihen haben. Wenn Sie auf das Symbol in der normalen Zeile klicken, sollten Sie nur die beiden unmittelbar verborgenen Zeilen umschalten. Ich benutzte JQuery, um dies zu tun, wenn ich Angular verwendete, aber zu React wechselte. Ich habe mit JQuery mit React als Lösung gespielt.

Answer 1

Sie benötigen eine Möglichkeit zur Kommunikation zwischen der NormalRow-Komponente und den beiden HiddenRow-Komponenten. In Ihrem Code ist der beste Weg, um es in der ParentDiv zu verwalten, wie folgt:

class ParentDiv extends React.Component { 
    constructor() { 
    this.state = { 
     displayHiddenRows: false 
    } 
    } 

    render() { 
    return (
     <div> 
     <table> 
      <tbody> 
      <NormalRow onClick={this.handlePlusClicked.bind(this)} /> 
      <HiddenRow show={this.state.displayHiddenRows} /> 
      <HiddenRow show={this.state.displayHiddenRows} /> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 

    handlePlusClicked() { 
    this.setState = { 
     displayHiddenRows: true 
    } 
    } 
} 

In den versteckten Reihen eine Bedingung für den Klassennamen von der Show prop hinzufügen. In der normalen Zeile ersetzen Sie das handleClick mit this.props.onClick -Funktion.

Answer 2

Es sieht aus wie NormalRow und ein paar HiddenRow s, die ein Teil der gleichen Steuer folgen sind. Das heißt, ich würde in Betracht ziehen, eine separate React-Komponente für sie zu erstellen, die die Click-Ereignisbehandlung sowie die View/Hide-Logik der zugrunde liegenden "normalen" und "versteckten" Zeilen kapselt. All dies könnte in reinem React erreicht werden (also keine jQuery erforderlich).

Das Markup, das von dieser neuen Komponente auf höherer Ebene generiert wird, wäre je nach Status entweder eine einzelne oder drei Tabellenzeilen. Aber da die render Methode nicht mehrere Elemente zurückgeben kann, müssten Sie einen Wrapper verwenden und meine Präferenz wäre <tbody> (im Gegensatz zu z. B. <div>, die dazu neigt, in solchen Szenarien missbraucht werden). Nach meinem besten Wissen können Sie so viele <tbody> Tags in einer Tabelle haben, wie Sie wollen, so würde dies eine gültige Wahl sein.

Mit dieser neuen Komponente (lass es ActiveRow nennen) Ihre ParentDiv Komponente würde wie folgt aussehen:

class ParentDiv extends React.Component { 
    render() { 
    return (
     <div> 
     <table> 
      <ActiveRow /> 
      <ActiveRow /> 
     </table> 
     </div> 
    ); 
    } 
} 

Hinweis ich die <tbody> Wrapper hier entfernt habe, wie es jetzt von ActiveRow zurückgegeben.