Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空。

针对此种情况我们打算优化一下代码,针对前端的输入框,增加onblur函数,当鼠标移除情况下,设置searchTerm为空字符串并且不让下方的options展示,当鼠标移入或者输入内容情况下在展示下方的options.

customLookUpForLwc.html:输入框添加onblur,下方options使用变量控制显隐

<template>
<div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div id="box" class={boxClass} aria-expanded="true" aria-haspopup="listbox" role="combobox">
{searchLabel}
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<template if:true={isValue}>
<div id="lookup-pill" class="slds-pill-container">
<lightning-pill class="pillSize" label={valueObj} name={valueObj} onremove={handleRemovePill}>
<lightning-icon icon-name={iconName} alternative-text="acc" ></lightning-icon>
</lightning-pill>
</div>
</template>
<template if:false={isValue}>
<div class="slds-p-top_none">
<lightning-input class={inputClass} type="search" id="input" value={searchTerm}
onclick={handleClick} onchange={onChange}
onblur={handleBlurEvent}
variant="label-hidden" autocomplete="off" placeholder="Search..." label='account search'>
</lightning-input>
</div>
</template>
</div>
<template if:true={isEnableShowOptions}>
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<template for:each={options} for:item="item">
<li key={item.Id} onclick={onSelect} data-id={item.Id} role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option">
<lightning-icon class="slds-icon slds-icon--small slds-icon-text-default" icon-name={iconName} alternative-text={objName} size="small"></lightning-icon>
<span class="slds-truncate">{item.Name}</span>
</span>
</li>
</template>
</ul>
</div>
</template> </div>
</div>
</div>
</div>
</div> </template>

customLookUpForLwc.js:搜索结果处增加处理项,同时增加是否显隐标签的判断逻辑

/* eslint-disable no-console */
/* eslint-disable @lwc/lwc/no-async-operation */ import lookUp from '@salesforce/apex/CustomLookUpForLwcController.lookUp';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getRecord } from 'lightning/uiRecordApi';
import { api, LightningElement, track, wire } from 'lwc'; export default class CustomLookUpForLwc extends LightningElement {
//store object record id
@api valueId;
//record API name
@api objName;
//record icon name,see Lightning Design System to choose
@api iconName; @api filter = '';
//unique key used to mark the unique component. several component use this component need to mapping
@api uniqueKey;
//used to set the field to fetch.eg: ['Account.Name'] means we need to search account name field as filter
@api fields; //search label show in lookup component
@api searchLabel; @track searchTerm = '';
//record name value
@track valueObj;
//record href
@track href;
//fetch result
@track options;
//fetch result backup
@track optionsBackup;
//is available value to show in lightning-pill
@track isValue = false;
//indicator if enable show options
@track isEnableShowOptions = true; //css
@track boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus';
@track inputClass = ''; @wire(lookUp, {searchTerm : '$searchTerm', myObject : '$objName', filter : '$filter'})
wiredRecords({ error, data }) {
if (data) {
this.record = data;
this.error = undefined;
if(this.searchTerm && this.isEnableShowOptions) {
this.options = this.record;
} else if(this.isEnableShowOptions) {
if(!this.optionsBackup) {
this.optionsBackup = this.record;
}
this.options = this.optionsBackup;
}
} else if (error) {
this.error = error;
this.record = undefined;
}
} //To get preselected or selected record
@wire(getRecord, { recordId: '$valueId', fields: '$fields' })
wiredOptions({ error, data }) {
if (data) {
this.record = data;
this.error = undefined;
this.valueObj = this.record.fields.Name.value;
this.href = '/'+this.record.id;
this.isValue = true;
} else if (error) {
this.error = error;
this.record = undefined;
}
} handleClick() { this.searchTerm = '';
this.isEnableShowOptions = true;
this.inputClass = 'slds-has-focus';
this.boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus slds-is-open';
} onSelect(event) {
console.log("In onSelect");
let ele = event.currentTarget;
let selectedId = ele.dataset.id;
//As a best practise sending selected value to parent and inreturn parent sends the value to @api valueId
let key = this.uniqueKey;
const valueSelectedEvent = new CustomEvent('valueselect', {
detail: { selectedId, key },
});
this.dispatchEvent(valueSelectedEvent);
this.boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus';
} onChange(event) {
this.searchTerm = event.target.value;
this.isEnableShowOptions = true;
} handleBlurEvent() {
this.isEnableShowOptions = false;
this.searchTerm = '';
} handleRemovePill() {
this.isValue = false;
let selectedId = '';
let key = this.uniqueKey;
const valueSelectedEvent = new CustomEvent('valueselect', {
detail: { selectedId, key },
});
this.dispatchEvent(valueSelectedEvent);
} }

我们修改以后运行结果为:当我们输入内容onblur失去焦点时,确实实现了下方内容隐藏,但是当我们输入内容有结果选中下方item时,item也并没有选中而是同样出现了下方内容隐藏的效果。这个是什么原因呢?

这个时候需要考虑的一点就是标准事件的执行顺序问题,标准事件中,我们常用的有 onclick / onblur,大家都知道onclick 是按钮按压以后执行,onblur是元素失去焦点以后执行。相当于onclick 为 onmousedown -> onmouseup这两个操作以后作为onclick,onblur在onmousedown以后,但是在onmouseup以前,也就是说Onblur在onclick操作以前,所以上述的demo中,下面的ul li的onclick事件无法调用到只能调用到input的onblur的事件,针对这种情况我们最终只需要将li的事件从onclick 修改成onmousedown即可完美的解决上述的问题。

总结:篇中主要是通过优化共通方法来引出 onclick / onblur 的执行顺序问题以及提出如何解决此种问题的方案,知识点很简单,纯粹前端知识,篇中有错误地方欢迎指出,有不懂欢迎留言。

Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown的更多相关文章

  1. Salesforce LWC学习(十三) 简单知识总结篇一

    本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 随着项目的学习以及trailhead的学习,会遇见自己曾经模糊的定义或者比较浪 ...

  2. Salesforce LWC学习(十) 前端处理之 list 处理

    本篇参看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array list是我们经 ...

  3. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  4. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  5. Salesforce LWC学习(四十) dynamic interaction 浅入浅出

    本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Light ...

  6. Salesforce LWC学习(二十六) 简单知识总结篇三

    首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 inpu ...

  7. Salesforce LWC学习(三) import & export / api & track

    我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件 ...

  8. Salesforce LWC学习(三十二)实现上传 Excel解析其内容

    本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...

  9. Salesforce LWC学习(十六) Validity 在form中的使用浅谈

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...

随机推荐

  1. Django model重写save方法及update踩坑记录

    一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...

  2. D. Caesar's Legions

    \(状态很容易设计\) \(设dp[i][j][u][v]表示放了i个1兵种和j个2兵种\) \(然后u不会0说明末尾放了连续u个1兵种,v不为0说明末尾放了连续v个2兵种\) #include &l ...

  3. STM32 基于 CubeMX配置GPIO点亮LED灯(超级详细+图文并茂)

    我是一个只会点灯的菜鸟: 相关文章 [STM32系列汇总]小白博主的STM32实战快速进阶之路(持续更新) 文章目录 相关文章 1 前言 2 理论分析 2.1 LED 原理 2.2 板载资料 2.3 ...

  4. 广告行业中那些趣事系列10:推荐系统中不得不说的DSSM双塔模型

    摘要:本篇主要介绍了项目中用于商业兴趣建模的DSSM双塔模型.作为推荐领域中大火的双塔模型,因为效果不错并且对工业界十分友好,所以被各大厂广泛应用于推荐系统中.通过构建user和item两个独立的子网 ...

  5. ocelot jwt 进行统一验证

    前一个帖子发了有关jwt 验证api的内容,这一次将jwt集成到ocelot网关中. ocelot集成jwt有一个很不错的nuget包,ocelot.jwtauthorize  ,但是这个包似乎支持n ...

  6. [csu1605]数独(精确覆盖问题)

    题意 :给定数独的某些初始值,规定每个格子的得分,求得分最大的数独的解. 思路:这是某年的noip的原题,高中时就写过,位运算也就是那个时候学会的--.这题明显是暴搜,但是需要注意两点,一是需要加一些 ...

  7. Js调用Android回调处理

    通常在混合app中经常会使用js调用native的方法,一般是: window.nativeApp.call(XXX); 直接调用native方法,对于简单的处理倒是可以,如果需要回调呢?期待的方式是 ...

  8. React之Antd table表格渲染按钮问题

    问题描述:table表格渲染表格数据时,会自动触发操作列中Button的onClick函数,表格渲染完成后,点击Button按钮,onClick函数不能被触发. // 定义表格表头数据 问题写法:  ...

  9. chrome "items hidden by filters"

    今天更新chrome 后遇到console不能显示errors的问题,折腾一番后发现在console的Default levels中选择Default即可.

  10. 取经四人组SQL

    一.表结构与数据 1.create table user1 (id int not null,user_name varchar(20) not null,over varchar(20) defau ...