因為不看前端文檔，導致白忙活一整天
情況是這樣子的，上周，我們接到了一項任務，需要把項目中輸入框的那個自動拼寫檢查功能去掉，也就是如下圖所示的紅線部分，這個檢查功能是瀏覽器默認具備的。
圖片
解決辦法
其實是有解決方法的，而且也不難，很簡單，只需要在輸入框標簽上加上一個屬性 spellcheck=false 即可，也就是：
圖片
圖片
解決思路
然而，難題來了，我得給項目里所有的輸入框標簽都添加這個屬性才行。鑒于本項目采用了antd-design組件庫，那么我們來梳理一下整個項目包含輸入框標簽的組件有哪些呢？
- Input： 涵蓋 input
- Select： 涵蓋 input
- InputNumber： 涵蓋 input
- Textarea： 涵蓋 textarea
- body： 直接在 body 上添加 spellcheck="true"
多種解決方法
1.ConfigProvider
圖片
ant-design 官方提供了一個組件，可以用來為全局的組件進行統一配置，這個組件可以傳入一個 input 的參數，即可配置全局的 Input 標簽
圖片
也就是：
圖片
由于這個配置只針對全局的Input，所以結果都有哪些組件成功去掉了拼寫校驗功能呢：
- 1、Input：?
- 2、Select：?
- 3、InputNumber：?
- 4、Textarea：?
2.修改defaultProps
大致的構思便是，對ant-design的源碼里input相關的部分進行調整，給Input、Textarea等組件設定一個defaultProps，這個defaultProps如下所示：
圖片
所以具體實現為以下代碼：
圖片
最終的結果便是，全局的Input、Textarea成功去除了拼寫檢查功能，然而Select、InputNumber卻未能實現，這是因為它們依賴于RCSelect、RCInputNumber這兩個其他的組件，所以要修改這兩個組件，就得去改動它們所依賴的組件，如此一來結果就是：
- Input：?
- Select：?
- InputNumber：?
- Textarea：?
3.攔截React.createElement
我們都知道在 React 中，只要涉及到 JSX 語法，最終在解析時都會通過 React.createElement 方法來創建標簽。
圖片
所以思路就是在最終調用 React.createElement時，判斷如果是 input、textarea 這兩個類型的話，就給標簽加上 spellCheck: false 這個屬性，具體代碼為：
圖片
這樣做的結果是：
- Input：?
- Select：?
- InputNumber：?
- Textarea：?
但是總是覺得直接涉及到React自帶方法的修改，有點不太好。
4.全局監聽input事件
主要的想法是全局監聽 input 事件，然后在此事件中為觸發該事件的 DOM 節點添加spellCheck: false屬性，具體的代碼是：
圖片
這樣做的結果是：
- Input：?
- Select：?
- InputNumber：?
- Textarea：?
5.MutationObserver
兼容性比較差，所以不考慮了吧~~~
圖片
最終看文檔：body 直接加 spellcheck="true"
唉。。。都怪自己之前沒仔細閱讀文檔。。。實際上之前所做的全都是徒勞，最為簡便的方法是直接在 body 上添加 spellcheck="false" 即可，這樣其下方的后代元素會自動沿用這個屬性值。。。
圖片
圖片
