React TypeScript中设置spellCheck禁用拼写检查时出现类型错误

嘿，我之前也踩过这个坑！你现在碰到的问题是React和TypeScript对DOM属性的命名规则、类型要求不一致导致的，咱们一步步来搞定它：

首先拆解下报错的核心原因：

1. 属性名大小写不匹配：HTML原生属性是全小写的spellcheck，但React的DOM属性采用驼峰命名法，对应的正确属性名是spellCheck（注意首字母大写）。TypeScript的InputHTMLAttributes类型定义里只认驼峰式的属性名，所以你写全小写的spellcheck会被判定为不存在的属性。
2. 属性值类型错误：原生HTML里spellcheck可以传"true"/"false"字符串，但React里这个属性的类型是布尔值（boolean | undefined），传字符串会触发类型不匹配的报错。

修正后的代码 #

把属性名改成驼峰式，值换成布尔类型的false就解决了：

<form> 
  <input 
    type='text' 
    name='accountName' 
    ref={accountName} 
    onChange={checkName} 
    spellCheck={false} 
  /> 
</form>

额外小提示 #

如果需要根据状态动态控制拼写检查，直接传布尔类型的变量就行，比如：

const [enableSpellCheck, setEnableSpellCheck] = useState(false);

// 渲染时
<input spellCheck={enableSpellCheck} />

这样TypeScript就不会再报错，同时也能正确禁用输入框的拼写检查功能啦～

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