React JS切換顯示有關聯繫人的其他信息

我剛剛開始學習React並試圖在聯繫人列表中實現切換效果，當您單擊它時應顯示有關聯繫人的其他信息。React JS切換顯示有關聯繫人的其他信息

當前的代碼如下：

var CONTACTS = [ 
    { 
     id: 1, 
     name: 'Darth Vader', 
     phoneNumber: '+250966666666', 
     image: 'img/darth.gif', 
     email: '[email protected]', 
     address: 'Death Star' 
    }, { 
     id: 2, 
     name: 'Princess Leia', 
     phoneNumber: '+250966344466', 
     image: 'img/leia.gif', 
     email: '[email protected]', 
     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> 
     ); 
    } 
});

如何我設置isOpened等於聯繫地址和電子郵件，以顯示其切換被觸發時？謝謝！

來源

2016-11-23 Denis

我們可以改變

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

到

{ 
    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是真實的。否則返回null（空UI）

然後，您可以使用複選框，切換按鈕或任何其他切換控件（基本上調用您的toggleState方法）更改狀態。

例如，使用一個複選框（在你的頁面的任何地方）：

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

來源

2016-11-23 13:52:20 Leone

React JS切換顯示有關聯繫人的其他信息

回答

相關問題