⼩程序封indinput输⼊框出现清空图标wx：key对input的影响
Q：我以前写⼩程序每次获取输⼊内容，都要写⼀个⽅法，觉得⼗分⿇烦，所以写了⼀个通⽤的⽅法。
A：我能想到的原理就是，不同的input所带的data不同，bindinput事件setData不同的data。
<input class="weui-input" bindinput="bindKeyInput" data-inputName='telephone' placeholder="请输⼊电话号码"/>
// 获取输⼊框的内容，封装起来，根据data-的值去渲染不同的data
bindKeyInput: function (e) {
let inputName = e.currentTarget.dataset.inputname;
this.setData({
[inputName]: e.detail.value
})
},
Q：最近项⽬有⼀个需求，就是点击输⼊框时右边显⽰清空图标。
A：我的思路是：好好利⽤bindfocus和bindblur，聚焦函数和⾮聚焦函数。聚焦时显⽰清空图标，⾮聚焦时隐藏清空图标。
// 清空输⼊框的内容
// 聚焦函数：如果字符串长度为0，则不显⽰清空图标，否则显⽰清空图标。
bindKeyFocus: function (e) {
let index = e.currentTarget.dataset.index;
let fullInputName = `local.is_clear_icon[${index}]`;
let inputLength = e.detail.value.length;
inputLength == 0 ? this.setData({ [fullInputName]: true }) : this.setData({ [fullInputName]: false })
},
// ⾮聚焦函数：隐藏清空图标
bindKeyBlur: function (e) {
let index = e.currentTarget.dataset.index;
let inputName = e.currentTarget.dataset.inputname;
let fullInputName = `local.is_clear_icon[${index}]`;
let fullInputName2 = `local.${inputName}[0]`;
let value = e.detail.value;
if (this.st) {
value = [""];
this.setData({ "st": false });
}
this.setData({ [fullInputName]: true, [fullInputName2]: value });
},
// 点击图标清空
clearInput: function (e) {
let inputName = e.currentTarget.dataset.inputname;
let fullInputName = `local.${inputName}`;
console.log(e.currentTarget.dataset.inputname, fullInputName)
let index = e.currentTarget.dataset.index;
let clearIcon = `local.focus[${index}]`;
this.setData({ [fullInputName]: [""], [clearIcon]: false, "st": true })
},
//名字输⼊
<block wx:for="{{name}}" wx:key="idx" wx:for-index="idx">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd wh-card-list-item">
<view class="weui-label wh-required" wx:if="{{idx == 0}}">姓名</view>
</view>
<view class="weui-cell__bd clear-input-father weui-flex" wx:if="{{idx == 0}}">
<input class="weui-input" data-inputName='name' placeholder="你的姓名" bindinput="bindKeyInput" value='{{item}}' bindfocus="bindKeyFocus" data-index="0" bindblur="bindKeyBlur"/>
<icon class='clear-input' type="clear" size="20" hidden='{{is_clear_icon[0]}}' data-inputName='name' data-index="0" catchtap='clearInput'/>
</view>
<view class="weui-cell__bd clear-input-father weui-flex wh-white-space" wx:else>
<view class='wh-white-space' data-index='{{idx}}' data-inputName='name' catchtap='chooseItem'>{{item}}</view>
<icon class='clear-input' type="clear" size="20" data-index='{{idx}}' data-inputName='name' catchtap='deteleItem'/>
</view>
</view>
</block>
//⼿机号输⼊
<block wx:for="{{telephone}}" wx:key="*this" wx:for-index="idx">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd wh-card-list-item">
<view class="weui-label wh-required" wx:if="{{idx == 0}}">⼿机号</view>
</view>
<view class="weui-cell__bd clear-input-father weui-flex" wx:if="{{idx == 0}}">
<input class="weui-input" type='number' placeholder="你的⼿机号" bindinput="bindKeyInput" data-inputName='telephone' value='{{item}}' bindfocus="bindKeyFocus" data-index="1" bindblur="bindKeyBlur"/> <icon class='clear-input' type="clear" size="20" hidden='{{is_clear_icon[1]}}' data-inputName='telephone' data-index="1" catchtap='clearInput'/>
input框禁止输入</view>
<view class="weui-cell__bd clear-input-father weui-flex wh-white-space" wx:else>
<view class='wh-white-space' data-index='{{idx}}' data-inputName='telephone' catchtap='chooseItem'>{{item}}</view>
<icon class='clear-input' type="clear" size="20" data-index='{{idx}}' data-inputName='telephone' catchtap='deteleItem'/>
</view>
</view>
</block>
Q：使⽤wx:for=“{{name}}”去渲染input输⼊框，⽽input输⼊框⼜修改了name的内容，这样会出现⼀种情况：⽤户⼀输⼊之后，input便失去聚焦。
A：个⼈观点：bindinput动态改变name的值，会重新渲染整个html代码。wx:key值设置值不对，改为wx:key="index"即可。
<block wx:for="{{name}}" wx:key="idx" wx:for-index="idx">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd wh-card-list-item">
<view class="weui-label wh-required" wx:if="{{idx == 0}}">姓名</view>
</view>
<view class="weui-cell__bd clear-input-father weui-flex" wx:if="{{idx == 0}}">
<input class="weui-input" data-inputName='name' placeholder="你的姓名" bindinput="bindKeyInput" value='{{item}}' bindfocus="bindKeyFocus" data-index="0" bindblur="bindKeyBlur"/>
<icon class='clear-input' type="clear" size="20" hidden='{{is_clear_icon[0]}}' data-inputName='name' data-index="0" catchtap='clearInput'/>
</view>
<view class="weui-cell__bd clear-input-father weui-flex wh-white-space" wx:else>
<view class='wh-white-space' data-index='{{idx}}' data-inputName='name' catchtap='chooseItem'>{{item}}</view>
<icon class='clear-input' type="clear" size="20" data-index='{{idx}}' data-inputName='name' catchtap='deteleItem'/>
</view>
</view>
</block>
下⾯这种就会失去聚焦：
<block wx:for="{{telephone}}" wx:key="*this" wx:for-index="idx">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd wh-card-list-item">
<view class="weui-label wh-required" wx:if="{{idx == 0}}">⼿机号</view>
</view>
<view class="weui-cell__bd clear-input-father weui-flex" wx:if="{{idx == 0}}">
<input class="weui-input" type='number' placeholder="你的⼿机号" bindinput="bindKeyInput" data-inputName='telephone' value='{{item}}' bindfocus="bindKeyFocus" data-index="1" bindblur="bindKeyBlur"/> <icon class='clear-input' type="clear" size="20" hidden='{{is_clear_icon[1]}}' data-inputName='telephone' data-index="1" catchtap='clearInput'/>
</view>
<view class="weui-cell__bd clear-input-father weui-flex wh-white-space" wx:else>
<view class='wh-white-space' data-index='{{idx}}' data-inputName='telephone' catchtap='chooseItem'>{{item}}</view>
<icon class='clear-input' type="clear" size="20" data-index='{{idx}}' data-inputName='telephone' catchtap='deteleItem'/>
</view>
</view>
</block>
wx:key的值以两种形式提供
1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯⼀的字符串或数字，且不能动态改变。
2. 保留关键字*this代表在 for 循环中的 item 本⾝，这种表⽰需要 item 本⾝是⼀个唯⼀的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组
件，框架会确保他们被重新排序，⽽不是重新创建，以确保使组件保持⾃⾝的状态，并且提⾼列表渲染时的效率。
1：有wx:key的情况（不重新创建，仅改变顺序）
添加元素或改变元素顺序导致数据改变时，
会校正带有Key的组件（可通过key识别各组件），
框架会根据“⽬前数据”，重新排序各组件，⽽不是重新创建，
使组件保持⾃⾝的状态，列表渲染效率⾼。
2：⽆wx:key的情况（重新创建）
添加元素或改变元素顺序导致数据改变时，
此时各组件没有key(⽆法识别各组件)
框架会被迫根据“⽬前数据”重新创建各组件，
使组件重置初始状态（原有状态⾃然被清空），列表渲染效率低。
B：两种情况的对⽐
wk:key组件识别渲染情况状态情况for效率
有各组件可识别渲染时仅改变组件顺序保持组件之前原来状态效率⾼
⽆组件⽆法识别渲染时重新创建各组件重置组件的初始状态效率低
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论