uni-app项目支付宝端Input不受控

前情

最近又接手一个全新多端项目，包括抖音/快手/微信/支付宝，其中就有支付宝端，需要实现一个SKU选择，同时需要控制选择的商品数量，如下图

坑位

既然是选择商品数量，那就不能让它出现小于等于0的数，我的想法是通过表单的input事件触发限制方法，限制它的值只允许在外面传进来的minmax之间的值，我这里设置的是199，也就是它的值只能为1~99，通过左右加减是可以做到控制的，但是为更好的体验，允许用户直接输入数量
关键代码如下：

1. <template>
2. <template>
3.     <input
4.       v-model="inputValue"
5.         controlled
6.       type="number"
7.       
8.       @input="handleInput"
9.     />
10. </template><input
11. <template>
12.     <input
13.       v-model="inputValue"
14.         controlled
15.       type="number"
16.       
17.       @input="handleInput"
18.     />
19. </template>  v-model="inputValue"
20. <template>
21.     <input
22.       v-model="inputValue"
23.         controlled
24.       type="number"
25.       
26.       @input="handleInput"
27.     />
28. </template><template>
29.     <input
30.       v-model="inputValue"
31.         controlled
32.       type="number"
33.       
34.       @input="handleInput"
35.     />
36. </template>controlled
37. <template>
38.     <input
39.       v-model="inputValue"
40.         controlled
41.       type="number"
42.       
43.       @input="handleInput"
44.     />
45. </template>  type="number"
46. <template>
47.     <input
48.       v-model="inputValue"
49.         controlled
50.       type="number"
51.       
52.       @input="handleInput"
53.     />
54. </template>  
55. <template>
56.     <input
57.       v-model="inputValue"
58.         controlled
59.       type="number"
60.       
61.       @input="handleInput"
62.     />
63. </template>  @input="handleInput"
64. <template>
65.     <input
66.       v-model="inputValue"
67.         controlled
68.       type="number"
69.       
70.       @input="handleInput"
71.     />
72. </template>/>
73. </template>

复制代码

理想很丰满，现实很骨感，发现在支付宝表单可以输入任何数字，不受控制，但是我在handleInput里打印了日志，事件是有触发的
解决方案

给input加上controlled，让它变成受控组件，此时你修改inputValue的值是可以同步更新的
关键代码如下：

1. <template>
2. <template>
3.     <input
4.       v-model="inputValue"
5.         controlled
6.       type="number"
7.       
8.       @input="handleInput"
9.     />
10. </template><input
11. <template>
12.     <input
13.       v-model="inputValue"
14.         controlled
15.       type="number"
16.       
17.       @input="handleInput"
18.     />
19. </template>  v-model="inputValue"
20. <template>
21.     <input
22.       v-model="inputValue"
23.         controlled
24.       type="number"
25.       
26.       @input="handleInput"
27.     />
28. </template><template>
29.     <input
30.       v-model="inputValue"
31.         controlled
32.       type="number"
33.       
34.       @input="handleInput"
35.     />
36. </template>controlled
37. <template>
38.     <input
39.       v-model="inputValue"
40.         controlled
41.       type="number"
42.       
43.       @input="handleInput"
44.     />
45. </template>  type="number"
46. <template>
47.     <input
48.       v-model="inputValue"
49.         controlled
50.       type="number"
51.       
52.       @input="handleInput"
53.     />
54. </template>  
55. <template>
56.     <input
57.       v-model="inputValue"
58.         controlled
59.       type="number"
60.       
61.       @input="handleInput"
62.     />
63. </template>  @input="handleInput"
64. <template>
65.     <input
66.       v-model="inputValue"
67.         controlled
68.       type="number"
69.       
70.       @input="handleInput"
71.     />
72. </template>/>
73. </template>

复制代码

文挡说明如下，文挡地址：input 输入框 - 支付宝文档中心

总结

支付宝小程序开发者应该是受React影响，才会出现受控和非受控，因为这二个概念是React里的
对于这种一端可以另一端不行的问题，一般就是平台的差异兼容问题，可以去对应平台的官方文挡看一下，也许能找到端倪，当然直接搜索引擎搜索也是可以的，对于做技术的我们每天都是在踩坑的路上，但我真心希望所有人都一路生花，少踩坑，也坚信坑坑难爬，坑坑过

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！