onclick react.jsのデータを表示して非表示にする

Question

ウェブページにデータを表示するコンポーネントがあります 別のコンポーネントを書き込んでそこにbuuttonを作成したいと思います。ボタンをクリックするだけで他のコンポーネントを非表示にし、基本的な入力フィールドのフォームを表示します。

私のコードは、この

成分アプリ

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> 

    ) 
    } 
} 

別の詳細コンポーネント クラスフィルターReact.Component {

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

このようないくつかの他のコンポーネントを拡張するようなものです。

私はテーブルを非表示にしようとしていますが、上記のフォームボタンは「フォームを表示」ボタンに使用されています。

class Form extends React.Component { 



    render() { 

     return(
     <div> 
     <form> 

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

     </form> 
      </div> 
    ) 


    } 
} 

これを行う方法を私にガイド...それはあなたが達成したいのか私には思える（それは少し厄介だ）あなたのコードにはあまり見ないあなた

Answer 1

に感謝二つの成分を伝えることです。コンポーネントAは、ボタンのクリックイベントに反応して、1）隠すコンポーネントBと、2）コンポーネントCを表示するように指示します。

これは、コンポーネントが階層関係にあるかどうかによって異なります。 Reactの公式文書であるchapterを読んでお勧めします。次に、hereはReactのコンポーネント通信戦略に関する素晴らしい記事です。

これに加えて、具体的には、これに重点を置いたパターンがFluxまたはReduxのように大成功を収めました。

希望します。