const inputRef = ref<any>()

Question

如果把上面的 换成 <HTMLElement | null>
怎么获取 input.value.validateInput()

Answer 1

张轩 2021-05-14 09:41:36

这里的 validateInput 不是一个 DOM 节点，而是一个 validateInput 组件实例，（因为你的 ref 是加在自定义组件上的，而不是普通的 HTML 上面）所以你声明成 DOM 节点类型是错误的，你可以给他自定义一个实例类型，比如 

interface ValidateInputInstance {
  validateInput: () => boolean;
}
const inputRef = ref<ValidateInputInstance | null>(null)
if (inputRef) {
 // 现在就能获取并联想到正确的类型了
inputRef.value.validateInput()
}

• 提问者 风少_ #1

  非常感谢！

Answer 2

提问者 风少_ 2021-05-14 09:07:16

老师你好，因为 inputRef.value 本身就是个 dom 节点，所以我不想用 ref<any> ，而是用上面图一的方式。

但是到了图二就获取不到了，我自己推测的原因是 inputRef.value 是个子组件，而不是简单的 dom 节点，打印 inputRef.value 出来，是个 proxy 代理。

希望图一不变，图二有什么方式获取到 validateInput( ) 这个方法吗？

• 张轩 #1

  这里的 validateInput 不是一个 DOM 节点，而是一个 validateInput 组件实例，（因为你的 ref 是加在自定义组件上的，而不是普通的 HTML 上面）所以你声明成 DOM 节点类型是错误的，你可以给他自定义一个实例类型，比如 
  interface ValidateInputInstance {
    validateInput: () => boolean;
  }
  const inputRef = ref<ValidateInputInstance | null>(null)
  if (inputRef) {
   // 现在就能获取并联想到正确的类型了
  inputRef.value.validateInput()
  }

Answer 3

张轩 2021-05-11 10:19:34

同学你好  inputRef.value 是个 DOM 节点啊 它上面并没有 validateInput 这个方法啊 这个方法是我们自定义的

• 提问者 风少_ #1

  如果把 inputRef.value 用 any 的类型的话，编辑器有个黄色波浪线提示，有什么办法解决吗？
  而且 inputRef.value 本来就是 dom 节点，感觉用 <HTMLElement | null> 更合适

• 张轩 回复 提问者 风少_ #2

  使用 type guard 就可以，就使用 if 判断一下
  if (inputRef.value) {
   // 现在里面的 inputRef.value 就是 HTMLElement 类型的了，自动的排除了 null 类型
  }

• 提问者 风少_ 回复 张轩 #3

  老师，麻烦你看一下我的最新提问，谢谢