ReactJS - どのように私は問題を抱えている子ボタン

Question

を使用することによって、全体のコンポーネントを削除するために、私はReactJSでTODOアプリを作成したいと、このような機能があります：

1. のonClickが表示されている/ hidding AddTaskBox（div要素のフォームあなたがタイトルと説明を書かなければならないところ） - 私はそれをしました。 visable AddTaskBoxで
2. は「X」とのボタンであり、私は全体の「AddTaskBox」を削除するために彼を使用したい - それをfigurすることはできません:(

を私が反応中に緑がかってる、そのことについて私の考えライブラリが間違っている可能性があり

私のコード：。助けを

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class AddButton extends React.Component{ 

    constructor(){ 
     super(); 

     this.state = { 
     isHidden: false 
    } 
    } 

    toggleHidden() { 
     this.setState({ 
     isHidden: !this.state.isHidden 
     }) 
    } 

    render(){ 
    return(
     <div> 
     <div 
      onClick={this.toggleHidden.bind(this)} 
      className="addtask__btn"> 
      + 
     </div> 
     {this.state.isHidden && <AddTaskBox />} 
     </div> 
    ); 
    } 
} 

class AddTaskBox extends React.Component{ 
    render(){ 
    return(
     <div className="addtask__box" > 
     <button> x </button> // here is my x to close component 
     <form> 
      <input type="text" placeholder="Nazwa Czynności"/> 
      <textarea> 
      Opis czynności do wykonania 
      </textarea> 
      <input className="btn" type="Submit" value="Submit"/> 
     </form> 
     </div> 
    ); 
    } 
} 

export {AddButton, AddTaskBox}; 

感謝:)

Answer 1

ようにそれを渡すことができます{this.state.isHidden && <AddTaskBox onClose={this.toggleHidden.bind(this)} />}

01その後、

と

<button onClick={this.props.onClose}> x </button>

クリックで子から関数を呼び出します

Answer 2

小道具を追加するとあなたのtoggleHidden()関数を渡すことができますTasktBoxコンポーネント。

だから、AddTaskBoxであなたの閉じるボタンが

... 
<button onClick={this.props.handleClick}> x </button> 
... 

のようになりますあなたは

あなたが AddTaskBox

にtoggleHidden関数を渡すだろうAddTaskBox意味AddTaskComponentで仮定し

{this.state.isHidden && <AddTaskBox handleClick={this.toggleHidden.bind(this)} />}