vue3 - Vue3.x+Element-Plus通过render函数创建表单ref的问题？

Question

代码：

<script>
import { defineComponent, ref, reactive, h, onMounted, nextTick } from 'vue'
import { ElForm } from 'element-plus'

export default defineComponent({
  components: {
    ElForm
  },
  setup () {
    const ruleFormRef = ref(null)
    const ruleForm = reactive({
    })

    const rules = reactive({
    })
    const handleClick = () => {
      // 表单校验
      console.log('ruleFormRef.value111:', ruleFormRef.value) //值为null
    }
    return {
      ruleFormRef,
      ruleForm,
      rules,
      handleClick
    }
  },
  render () {
    const btnChildren = <el-button onClick={this.handleClick}>提交</el-button>
    return h(ElForm, {
      ref: this.ruleFormRef,
      model: this.ruleForm,
      rules: this.rules,
      labelWidth: '120px',
      class: 'demo-ruleForm'
    }, [btnChildren])
  }
})
</script>

进行表单提交校验，打印出来的ruleFormRef.value的值为null。该怎么处理？

Answer 1

将代码改成这样就可以了

return h(ElForm, {
      ref: (el) => this.ruleFormRef = el,
      model: this.ruleForm,
      rules: this.rules,
      labelWidth: '120px',
      class: 'demo-ruleForm'
    }, [btnChildren])