Lightning-覆盖标准按钮（5）

现在我们已经成功地重写了New按钮，只需要一点点工作，我们也可以重用组件来覆盖Edit按钮。这实际上有点愚蠢，因为当我们覆盖Edit按钮时，它也禁用标准记录页面的内联编辑能力。这意味着我们永远无法编辑对话框中的五个字段。但是，让我们这样做，因为它可能在另一个环境中有用。

创建代码来处理上下文

在Developer Console中，切换到PropertyDialog组件。

在force之前的新行上添加新的aura：属性：recordData：

<aura:attribute name="modalContext" type="String" default="New" />

将作为模式标题的<h2>标签更改为：
```
<h2 class="slds-text-heading--medium">{!v.modalContext} Record</h2>
```
通过将标题的上下文定义为aura：属性，当模式用于编辑记录时，我们可以轻松地将其从“新建”更改为“编辑”。
切换到PropertyDialogController。

在doInit：function（component，event，helper）{下面添加一个新行{并添加下面的代码：

var recId = component.get("v.recordId");
if (recId) {
    component.set("v.modalContext", "Edit");
}

在if语句中包装函数的其余部分：

if (!recId) {
    component.find("forceRecord").getNewRecord(
        "Property__c",
        null,
        false,
        $A.getCallback(function() {
            var rec = component.get("v.propertyRecord");
            var error = component.get("v.recordError");
            if (error || (rec === null)) {
                console.log("Error initializing record template: " + error);
                return;
            }
        })
    ); 
}

保存这两个文件。

预填充字段

当我们使用对话框编辑记录时，我们显然需要当前的字段值已经在对话框中（你不能编辑你看不到的东西）。

切换回PropertyDialog组件。
添加 value="{!v.propertyRecord.Name}", value="{!v.propertyRecord.Beds__c}", value="{!v.propertyRecord.Baths__c}", 和 value="{!v.propertyRecord.Price__c}" 到相应的lightning:input 标签.

添加 value="{!v.propertyRecord.Status__c}" 到 lightning:select.

你的代码应该是这样的：

<lightning:input aura:id="propName" name="propName" label="Property Name" value="{!v.propertyRecord.Name}" required="true" class="slds-size--1-of-1 slds-p-horizontal_x-small" />
<lightning:input aura:id="propBeds" name="propBeds" label="Beds" value="{!v.propertyRecord.Beds__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
<lightning:input aura:id="propBaths" name="propBaths" label="Baths" value="{!v.propertyRecord.Baths__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
<lightning:input aura:id="propPrice" name="propPrice" label="Price" value="{!v.propertyRecord.Price__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />    
<lightning:select aura:id="propStatus" name="propStatus" label="Status" value="{!v.propertyRecord.Status__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small">
    <aura:iteration items="{!v.picklistValues}" var="item">
        <option value="{!item}">{!item}</option>
    </aura:iteration>
</lightning:select>

保存文件。

更新取消按钮

在财产记录页面上，当用户点击取消按钮，现在他们重新回到属性列表页面。让我们改变这一点，以便用户最终在财产记录页上。

切换回PropertyDialogController。

用以下代码替换cancelDialog函数：

cancelDialog: function(component, event, helper) {
    var recId = component.get("v.recordId");
    if (!recId) {
        var homeEvt = $A.get("e.force:navigateToObjectHome");
        homeEvt.setParams({
            "scope": "Property__c"
        });
        homeEvt.fire();
    } else {
        helper.navigateTo(component, recId);
    }
}

保存文件。
切换回您的组织并单击替代文本：设置图标并选择 Setup
点击 Object Manager.
点击 Property.
点击 Buttons, Links, and Actions.
点击然后选择编辑。
选择覆盖 Lightning Component Bundle.
选择 c:PropertyDialog 作为要覆盖的包，然后单击保存。
点击应用启动器图标，然后选择Dreamhouse Lightning。
单击“属性”，然后单击任何属性名称以导航到其属性记录页面，然后刷新此页面。
单击编辑按钮以在记录页面的上下文中测试对话框。

高五分！正如你刚刚学到的，使用Lightning组件覆盖标准动作和按钮是非常容易的。当然，这样做有一些考虑，但这个过程本身是非常简单的。现在，去超越！