Hack trick，lightning-input-field参照字段值响应式清除失效的方法
场景复原
今天有一个需求是这样的：根据用户选择的查找字段的id值，判断选择的id记录是否符合某种要求，如果不符合，则将这个输入框的内容清除并且提示。当然，这个需求乍一看很容易实现，参照我之前分享的一个经验博文 里面有这个需求的写法。
但是今天测试的时候，发现第一次选择不符合要求的记录的时候，输入框会正常被清除，但是第二次、第三次选择的时候，尽管判定其无效，并且用变量控制，将变量赋值为''，但是输入框的显示值仍然不会有任何变化。
这不是尴尬了么。。上一篇博文某种意义上无法达到需要的要求了。
排查原因
首先我要确定的是，控制显示值的变量到底在判定前后有没有改变（确认LWC框架确实捕捉到了变量改变的事件）下面是我简化的代码：
<lightning-input-field field-name="LOOK_UP__c" value={lookUpValue} onchange={handleChange}></lightning-input-field>
@track lookUpValue
handleChange(event) {
// get the input look-up record id
var id = event.detail[0]
// save the id first
this.lookUpValue = id
if (!!id) {
// validate if id has a value
validField({
Id: id}).then(result => {
if (result == false) {
// invalid, then clear the id
// 验证用
console.log('before', this.lookUpValue)
this.lookUpValue = ''
// 验证用
console.log('after', this.lookUpValue)
}
}
}
}
输出的日志如下：
// before mIx139284920104axK
// after
可以发现的是变量的值确实变化了。但是输入框的值并没有被重新渲染（rerendered）。
在使用lwc标准标签的情况下，我们能做到的只有到目前为止了。框架的特点带来的奇奇怪怪的行为通常是不可抗力。但是好歹还是要挣扎一下的，于是查了半天的SFSE，还真被我找到了一个神奇的解决方法：把赋值行为放在异步方法中。
解决方法
把赋值行为放在异步方法中，这里我们无需改变HTML元素，只需要更改onchange方法：
handleChange(event) {
// get the input look-up record id
var id = event.detail[0]
// save the id first
this.lookUpValue = id
if (!!id) {
// validate if id has a value
validField({
Id: id}).then(result => {
if (result == false) {
// invalid, then clear the id
setTimeout(() => {
this.lookUpValue = ''}, 0);
}
}
}
}
再次尝试，这次不管是第几次，都能完美响应清除行为。成功！
其中的原理，SFSE上暂时没有找到，期待lwc的开发者能够解释一下。
本篇可以算是之前那篇响应式验证博文的补充，请大家参考项目中的需求，尝试我给出的解决方法！
相关链接
- 上一篇博文：响应式验证标准查找输入框
- SFSE的解决方法来源：How do you change the value of a lightning-input-field in javascript? 第四个回答
- 我提出的其中原因的问题：[Why is lightning-input-field programmatically rerender only in async change-value function? 尚未有解答