網站首頁 編程語言 正文
總覽
當我們把一個input
的初始值設置為null
或者覆蓋初始值設置為null
時,會產生"value
prop on?input
?should not be null"警告。比如說,初始值來自于空的API響應。可以使用一個回退值來解決這個問題。
這里有個例子來展示錯誤是如何發生的。
export default function App() { // ?? Warning: `value` prop on `input` should not be null. // Consider using an empty string to clear the component or `undefined` for uncontrolled components. return ( <div> <input value={null} /> </div> ); }
上述代碼的問題在于,我們為input
表單的value
屬性設置為null
,這是不被允許的。
你也可能從遠程API獲取你的input
表單的值,并將其設置為null
。
回退值
為了解決該問題,我們可以通過提供回退值,來確保永遠不會為input
表單的value
屬性設置null
。
import {useState} from 'react'; const App = () => { // ??? pass empty string as initial value const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event.target.value); }; // ? use fallback, e.g. // value={message || ''} return ( <div> <input type="text" id="message" name="message" onChange={handleChange} value={message || ''} /> </div> ); }; export default App;
我們把state
變量的值初始化為一個空字符串,而不是null
。
這樣就可以擺脫警告,除非在你代碼的其他地方將state
變量設置為null
。
我們使用邏輯與(||)操作符,如果操作符左側的為假值(比如說null
),則返回其右側的值。這可以幫助我們確保input
表單的value
屬性永遠不會被設置為null
。
defaultValue
如果你借助refs
使用不受控制的input
表單,請不要在input
元素上設置value
屬性,使用defaultValue
來代替value
屬性。
import {useRef} from 'react'; const App = () => { const inputRef = useRef(null); function handleClick() { console.log(inputRef.current.value); } return ( <div> <input ref={inputRef} type="text" id="message" name="message" defaultValue="Initial value" /> <button onClick={handleClick}>Log message</button> </div> ); }; export default App;
上述示例使用了不受控制的input
。注意input
表單上并沒有設置onChange
或者value
屬性。
你可以使用defaultValue
屬性來為不受控制的input
傳遞初始值。然而,這一步驟不是必要的,如果你不想設置初始值,你可以省略該屬性。
當使用不受控制的input
表單時,我們使用ref
來訪問input
元素。每當用戶點擊例子中的按鈕時,不受控制的input
的值都會被記錄下來。
你不應該為不受控制的input
設置value
屬性,因為這將使input
表單不可變,你將無法在其中輸入。
翻譯原文鏈接:bobbyhadz.com/blog/react-…
原文鏈接:https://juejin.cn/post/7128773403749646350
相關推薦
- 2022-08-06 python列表去重的5種常見方法實例_python
- 2022-09-26 Python實現自動化域名批量解析分享_python
- 2022-11-26 詳解vant2?自動檢查表單驗證?-validate_React
- 2022-05-19 C++實現職工工資管理系統課程設計_C 語言
- 2022-05-27 Linux?創建oracle數據庫的詳細過程_oracle
- 2022-11-25 C語言中atoi函數模擬實現詳析_C 語言
- 2022-08-10 pandas函數isnull的具體使用_python
- 2022-12-23 python中的列表和元組實例詳解_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支