Input標(biāo)簽自動(dòng)校驗(yàn)功能去除實(shí)現(xiàn)

更新時(shí)間：2022年07月04日 15:21:51 作者：Sunshine_Lin

這篇文章主要為大家介紹了Input標(biāo)簽的自動(dòng)拼寫檢查功能去除實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

自動(dòng)校驗(yàn)

注：以下輸入框包含input、textarea

事情是這樣的，上個(gè)星期，接到了一個(gè)需求，要求去除掉項(xiàng)目中的輸入框的自動(dòng)拼寫檢查功能，也就是下圖出現(xiàn)的紅線，這個(gè)檢查是瀏覽器自帶的

解決方法

其實(shí)是有解決方法的，而且也不難，很簡單，只需要在輸入框標(biāo)簽上加上一個(gè)屬性spellcheck=false即可，也就是：

<input spellcheck=false />
<textarea spellcheck=false />

解決思路

但是問題來了，我需要給全局的輸入框標(biāo)簽都加上才行，由于本項(xiàng)目是使用了antd-design這個(gè)組件庫，那我們來看看整個(gè)項(xiàng)目都有哪些組件包含了輸入框標(biāo)簽?zāi)兀?/p>

1、Input：包含input

2、Select：包含input

3、InputNumber：包含input

4、Textarea：包含textarea

多種解決方法

1、ConfigProvider

ant-design官方提供了一個(gè)組件，可以用來為全局的組件進(jìn)行統(tǒng)一配置，這個(gè)組件可以傳入一個(gè)input的參數(shù)，即可配置全局的Input標(biāo)簽

也就是：

<ConfigProvider 
  input={{spellCheck: false}}>
</ConfigProvider>

由于這個(gè)配置只針對(duì)全局的Input，所以結(jié)果都有哪些組件成功去掉了拼寫校驗(yàn)功能呢：

1、Input：?
2、Select：?
3、InputNumber：?
4、Textarea：?

2、修改defaultProps

大概的思路就是，修改ant-design的源碼中的input這一部分，給Input、Textarea這些組件加上一個(gè)defaultProps，這個(gè)defaultProps長這樣：

const defaultProps = {
  spellCheck: false
}

所以具體實(shí)現(xiàn)為以下代碼

// Input
import Input from 'antd/es/input';
Input.defaultProps = {
  ...Input.defaultProps,
  ...defaultProps,
};
export default Input
// Textarea
import TextArea from 'antd/es/input/TextArea';
TextArea.defaultProps = {
  ...TextArea.defaultProps,
  ...defaultProps,
};
export default Textarea

結(jié)果就是，全局的Input、Textarea都去除了拼接檢查了，但是Select、InputNumber卻沒有去除，因?yàn)樗麄兪且蕾嚵?strong>RCSelect、RCInputNumber這兩個(gè)另外的組件，所以想改這兩個(gè)，就得去改他們兩依賴的組件，所以結(jié)果就是：