React中useRef调用HTMLInputElement的reset()出现TS2339错误如何解决？

错误根因 #

reset() 是 <form> 表单元素的原生方法，不属于单个 <input> 输入框元素，所以你给类型为 HTMLInputElement 的ref调用该方法时，TypeScript会抛出类型不存在的报错。

解决方案 #

根据你的实际需求选择对应实现即可：

方案1：仅清空单个输入框的值 #

直接修改输入框的value属性即可，注意加非空判断避免ref未挂载时报错：

import { useRef } from 'react';

const infoInputRef = useRef<HTMLInputElement>(null);

// 清空单个输入框
if (infoInputRef.current) {
  infoInputRef.current.value = '';
}

方案2：重置整个表单所有输入项到初始值 #

如果你需要恢复表单所有控件的默认值，将ref绑定到<form>元素上即可调用reset()方法：

import { useRef } from 'react';

const formRef = useRef<HTMLFormElement>(null);

// 重置整个表单
if (formRef.current) {
  formRef.current.reset();
}

form.reset()会自动将表单内所有输入控件的值恢复到页面初始加载时的默认值，适合多输入项的表单重置场景。

内容的提问来源于stack exchange，提问作者zaibil