问个van-field组件问题

Question

使用vant-weapp小程序前端框架，在做一个表单提交时。发现：van-field里面的值的不能被提交上去，非得一个个输入框去写JS赋值函数，然后带value值去提交才能获取到。

<form bindsubmit="onAdd">
<van-cell-group>
  <van-field
    name='cpname'
    label="商户名称："
    input-align="right"
  />
</van-cell-group>
<van-cell-group>
  <van-field
    name='jyz'
    label="经营者："
    input-align="right"
  />
<van-row custom-class="button">
  <van-col span="20" offset="2">
    <button form-type="submit" type="primary">添加</button>
  </van-col>
</van-row>

这样提交发现获取不到表单值

需要写成下面这样的

<form bindsubmit="onAdd">
<van-cell-group>
  <van-field
    name='cpname'
    label="商户名称："
    input-align="right"
    bind:blur="cpnamechange"
  />
</van-cell-group>
<van-cell-group>
  <van-field
    name='jyz'
    label="经营者："
    input-align="right"
    bind:blur="jyzchange"
  />
<van-row custom-class="button">
  <van-col span="20" offset="2">
    <button form-type="submit" type="primary">添加</button>
  </van-col>
</van-row>

这样写，如果一个form中有20个填写项表单，岂不是在JS文件中要写20个获取值的函数？

求解

Answer 1

很多时候，换个思路，别有洞天：

如何使用同一个回调函数，监听不同的van-field？

我们知道，回调函数会传入事件对象，那么就可先在组件定个data-fieldName属性，这样在回调函数里即可知道是哪个van-field组件触发的了：

<van-field
    name='cpname'
    data-fieldName="name"
    label="商户名称："
    bind:blur="handleFieldChange" />
<van-field
    name='jyz'
    data-fieldName="jyz"
    label="经营者："
    bind:blur="handleFieldChange" />

由此，JS可以统一用一个函数，监听所有表单项的数据更新：

Page({
    data: {
        cpname : '',
        jyz    : ''
    },
    handleFieldChange(e) {
        // 获取是哪个van-field的回调
        let fieldName = e.currentTarget.dataset.fieldName
        // 获取输入框的新值
        let newValue = e.detail
        // 定义好要更新的data对象，
        let data = {}
        // 利用JS的对象的键名支持字符串形式的下标，自动给每个字段去更新，不用手写
        data[fieldName] = newValue
        this.setData(data)
    }
})

相信克服了这个坎，后面其他问题也难不倒你了。

事件回传给我们编程带来了很多灵活性，
同样的原理，还可用在很多其他的方面。

加油，共勉。