Question

我刚刚开始学习React并尝试在联系人列表中实现切换效果，当您点击它时，应显示有关联系人的其他信息。

目前的代码如下：

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

如何设置isOpened等于联系地址和电子邮件，以便在触发切换时显示它？谢谢！

Answer 1

我们可以改变

private void CreateEmailItem()
{
    Object selObject = this.Application.ActiveExplorer().Selection[1];
    string sendernames = (selObject as Outlook._MailItem).SenderName;
    Outlook._MailItem eMail = (Outlook._MailItem)
    this.Application.CreateItem(Outlook.OlItemType.olMailItem);
    eMail = selObject as Outlook._MailItem;
    ((Outlook._MailItem)eMail).Body = "Approved";
    ((Outlook._MailItem)eMail).ReplyAll();
}

到

<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。否则返回null（空UI）

然后，您可以使用复选框，切换按钮或任何其他切换控件（基本上调用您的this.state.isOpened方法）来更改状态。

例如，使用复选框（页面中的任何位置）：

toggleState

React JS Toggle显示有关联系人的其他信息

1 个答案: