onclick zeigen und verbergen Daten in react.js

Question

Ich habe eine Komponente, die Daten auf der Webseite zeigt Ich möchte eine andere Komponente schreiben und BUUTTON darin erstellen. die nur andere Komponenten verbergen, wenn Sie auf die Schaltfläche klicken und das grundlegende Eingabefeld anzeigen.

Mein Code ist so etwas wie dieses

Komponente App

class App extends React.Component{ 

    constructor(props) { 
     super(props); 
     this.state= { 
     filter: null, 
     }; 
     this.setFilter = this.setFilter.bind(this); 

    } 

    setFilter(filter) { 
     this.setState({filter: filter}) 
    } 


    render(){ 


     let filteredPassword = details_data.filter(
     (detail) =>{ 
      console.log(detail.website.toLowerCase(), this.state.filter) 
      return detail.website.toLowerCase().indexOf(this.state.filter)!= -1; 
     } 
     ); 

     return (

     <ul> 
      <Filter onUpdateFilter={this.setFilter} /> 
      { 
       filteredPassword.map((detail)=>{ 
        return <Detail item={detail} 
        key={detail.id}/> 
       }) 
      } 

     </ul> 

    ) 
    } 
} 

Ein weiteres Detail Komponente Klasse Filter React.Component erweitert {

constructor() { 
    super(); 
    this.state={ 
     search: 'Search' 
     } 
    } 

    updateSearch(event) { 
    this.props.onUpdateFilter(event.target.value.substr(0,40)) 
    } 

    formShow(){ 

    } 

    render() { 

    return (
     <div> 

      <input id="search" type="text" placeholder={this.state.search} onChange={this.updateSearch.bind(this)}/> 
      &nbsp; &nbsp;&nbsp; &nbsp; 
      <input id="button1" type="button" value="+" onClick={this.formShow()}/> 


     </div> 
     ) 
    } 
} 

Nur wenige andere Komponente wie diese.

Ich versuche, die Tabelle zu verstecken und Form-Taste oben wird verwendet, um "Formular anzeigen" -Taste.

class Form extends React.Component { 



    render() { 

     return(
     <div> 
     <form> 

      <input type="text" placeholder="username" /> 
      <input type="password" placeholder="username" /> 

     </form> 
      </div> 
    ) 


    } 
} 

Leite mich, wie dies zu tun .. danke

Answer 1

Ohne zu viel, um Ihren Code zu suchen (es ist ein bisschen chaotisch) es scheint mir, was Sie wollen, zwei Komponenten zu kommunizieren zu erreichen ist. Komponente A wird auf ein Tastenklickereignis reagieren und sagen: 1) Komponente B zum Ausblenden und 2) Komponente C wird angezeigt.

Die Art, dies zu tun, hängt davon ab, ob die Komponenten eine hierarchische Beziehung haben oder nicht. Ich würde empfehlen, mit dem Lesen dieser chapter der offiziellen React-Dokumentation zu beginnen. Dann ist here auch ein großartiger Artikel über Komponentenkommunikationsstrategien in React.

Obendrein haben einige Muster, die sich speziell darauf konzentrieren, großen Erfolg, wie Flux oder Redux.

Ich hoffe, es hilft.