uniapp中 form-input 没有执行 handleRef

[Chaos0221]

组件

form-input

基础库版本

• 2.x

设备机型

ide

手机系统

• iOS

APP

uniapp 支付宝端

组件库版本

2.x

预期行为

复现步骤

在uniapp中使用form-input组件，handleRef这段代码没有执行，提交表单时获取的values也是空对象，请问是什么原因？是绑ref的方式不对吗

复现 demo

代码：

// template
    <ant-form-input 
        label="label1" 
        name="name1" 
        @ref="handleRef" 
      />

// js
  onLoad() {
    this.initForm()
  },
methods:{
    initForm() {
      this.form = new Form();
    },
    handleRef(ref) {
      console.log('ref:', ref)
      this.form.addItem(ref);
    },
}

[rayhomie]

参考以下例子在uniapp中通过this.$refs获取ref

<template>
  <div>
    <!-- 绑定 DOM 元素的 ref -->
    <input ref="myInput" />

    <!-- 绑定子组件的 ref -->
    <my-component ref="myComponent"></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    MyComponent
  },
  mounted() {
    // 访问 DOM 元素的引用
    this.$refs.myInput.focus();

    // 访问组件实例的引用
    this.$refs.myComponent.doSomething();
  },
  methods: {
    doFocus() {
      // 在方法中访问 DOM 元素的引用
      this.$refs.myInput.focus();
    },
    doComponentAction() {
      // 访问组件实例的引用
      this.$refs.myComponent.doSomething();
    }
  }
};
</script>

[Chaos0221]

      this.$refs.handleRef.forEach(ref=>{
        this.form.addItem(ref);
      })

这样写之后绑定上了，感谢

[forwzb]

这句代码：import { Form } from 'antd-mini/Form/form';
请问一下，在unipp里，又该怎么引用呢，

[Chaos0221]

这句代码：import { Form } from 'antd-mini/Form/form';

请问一下，在unipp里，又该怎么引用呢，

安装了antd-mini就可以这样引入了

[forwzb]

像 mini中的表单：
import { Form } from 'antd-mini/Form/form'; Page({ data: { position: 'horizontal', }, onLoad() { this.form = new Form(); if (this.formRefList) { this.formRefList.forEach((ref) => { this.form.addItem(ref); }); } }, handleRef(ref) { if (!this.formRefList) { this.formRefList = []; } this.formRefList.push(ref.detail); }, reset() { this.form.reset(); }, toggle() { this.setData({ position: this.data.position === 'horizontal' ? 'vertical' : 'horizontal', }); }, async submit() { const values = await this.form.submit(); console.log(values); }, });

我在unapp 引入：

`

<script> import Form from '/wxcomponents/miniprogram_npm/antd-mini/Form/form.js'; export default { data() { return { href: 'https://uniapp.dcloud.io/component/README?id=uniui', form: null, } }, .... ` 运行时，提示如下问题：  我现在不知道怎么处理了，有点尴尬