ant-design / ant-design-mini

Ant Design for Alipay Mini Program

Home Page:https://mini.ant.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uniapp中 form-input 没有执行 handleRef

Chaos0221 opened this issue · comments

组件

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);
    },
}
commented

参考以下例子在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>
      this.$refs.handleRef.forEach(ref=>{
        this.form.addItem(ref);
      })

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