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切换显示有关联系人的其他信息

回答

相关问题