React JS連絡先に関する追加情報を表示するために切り替えます

Question

Reactを学び、連絡先リストのトグル効果を実装しようとしましたが、連絡先に関する追加情報が表示されるはずです。

現在のコードは以下の通りです：

私が設定することができますトグルがトリガされたときに、それを示すために、アドレスや電子メールを連絡する等しいisOpened方法

var CONTACTS = [ 
    { 
     id: 1, 
     name: 'Darth Vader', 
     phoneNumber: '+250966666666', 
     image: 'img/darth.gif', 
     email: 'vader@deathstar.com', 
     address: 'Death Star' 
    }, { 
     id: 2, 
     name: 'Princess Leia', 
     phoneNumber: '+250966344466', 
     image: 'img/leia.gif', 
     email: 'leia@skywalker.com', 
     address: 'Naboo' 
    } 
]; 

var Contact = React.createClass({ 
    getInitialState : function() { 
     return { 
     isOpened : false 
     }; 
    }, 

    toggleState : function() { 
     this.setState({ 
     isOpened: !this.state.isOpened 
     }); 
    }, 

    render: function() { 
     return (
       <li className="contact" onClick={this.toggleState}> 
        <img className="contact-image" src={this.props.image} width="60px" height="60px" /> 
        <div className="contact-info"> 
         <div className="contact-name"> {this.props.name} </div> 
         <div className="contact-number"> {this.props.phoneNumber} </div> 
         <div> {this.state.isOpened} </div> 
        </div> 
       </li> 
     ); 
    } 
}); 

を？ ありがとう！

Answer 1

私たちは、それが何

{ 
    this.state.isOpened ? 
     <div> 
      <div className="contact-email"> {this.props.email} </div> 
      <div className="contact-address"> {this.props.address} </div> 
     </div> 
     : 
     null 
} 

に

<div> {this.state.isOpened} </div> 

を変更することができますがthis.state.isOpenedがtrueの場合、メールやアドレスを持つdivを示しています。そうでない場合はnullを返します（空のUI）

次に、チェックボックス、トグルボタン、または他のトグルコントロール（基本的にtoggleStateメソッドを呼び出します）を使用して状態を変更できます。

<input type="checkbox" checked={this.state.isOpened} onChange={this.toggleState} /> 

：チェックボックス（ページ内の任意の場所）を使用して、例えば

、