React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
Form數(shù)據(jù)管理
有時會遇到多個位置需要用戶輸入的情況,若每個狀態(tài)都配置state或handler會很繁瑣,可以嘗試下面的方法
import * as React from 'react'; const LoginForm = () => { // 將多個狀態(tài)合并為對象 const [state, setState] = React.useState({ email: '', password: '', }); // 通過單個handler統(tǒng)一管理 const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); alert(state.email + ' ' + state.password); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input id="email" type="text" value={state.email} onChange={handleChange} /> </div> <div> <label htmlFor="password">Password</label> <input id="password" type="password" value={state.password} onChange={handleChange} /> </div> <button type="submit">Submit</button> </form> ); }; export { LoginForm };
重置Form狀態(tài)
由于每次用戶輸入后都需要數(shù)據(jù)重置回初始狀態(tài),可以使用以下方法來預(yù)設(shè)初始值,并重置Form內(nèi)容,方便新用戶的再次輸入
import * as React from 'react'; const LoginForm = () => { // 初始 const [state, setState] = React.useState({ // 設(shè)置初始值 email: '123@456.com', password: '12345', }); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 在這里重置狀態(tài) setState({ email: '', password: '', }); alert(state.email + ' ' + state.password); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input id="email" type="text" value={state.email} onChange={handleChange} /> </div> <div> <label htmlFor="password">Password</label> <input id="password" type="password" value={state.password} onChange={handleChange} /> </div> <button type="submit">Submit</button> </form> ); }; export { LoginForm };
屏幕顯示如下,submit后 Form內(nèi)容會被重置
也可以考慮設(shè)置一個變量來統(tǒng)一管理初始值,方便對狀態(tài)的查找和維護(hù)
import * as React from 'react'; const LoginForm = () => { // 定義初始值 const INITIAL_STATE = { email: '', password: '', }; const [state, setState] = React.useState(INITIAL_STATE); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 重置初始值 setState(INITIAL_STATE); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input id="email" type="text" value={state.email} onChange={handleChange} /> </div> <div> <label htmlFor="password">Password</label> <input id="password" type="password" value={state.password} onChange={handleChange} /> </div> <button type="submit">Submit</button> </form> ); }; export { LoginForm };
form驗(yàn)證
驗(yàn)證Form的輸入是不可或缺的流程,可參考以下方案
import * as React from 'react'; const LoginForm = () => { const INITIAL_STATE = { email: '', password: '', }; // 設(shè)置Validation要求 const VALIDATION = { email: [ { isValid: (value) => !!value, message: 'Is required.', }, { isValid: (value) => /\S+@\S+\.\S+/.test(value), message: 'Needs to be an email.', }, ], password: [ { isValid: (value) => !!value, message: 'Is required.', }, ], }; // 獲取ErrorsFields const getErrorState = (state) => Object.keys(state).reduce((acc, key) => { if (!VALIDATION[key]) return acc; const errorsPerField = VALIDATION[key].map((validation) => ({ isValid: validation.isValid(state[key]), message: validation.message, })).filter((errorPerField) => !errorPerField.isValid); return { ...acc, [key]: errorsPerField }; }, {}); const [state, setState] = React.useState(INITIAL_STATE); // 設(shè)置錯誤信息變量 const errorState = getErrorState(state); console.log(errorState); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 獲取錯誤反饋 const hasErrors = Object.values(errorFields).flat().length > 0; if (hasErrors) return; setState(INITIAL_STATE); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input id="email" type="text" value={state.email} onChange={handleChange} /> {/* 顯示email錯誤 */} {errorState.email?.length ? ( <span style={{ color: 'red' }}> {errorState.email[0].message} </span> ) : null} </div> <div> <label htmlFor="password">Password</label> <input id="password" type="password" value={state.password} onChange={handleChange} /> {/* 顯示password錯誤 */} {errorState.password?.length ? ( <span style={{ color: 'red' }}> {errorState.password[0].message} </span> ) : null} </div> <button type="submit">Submit</button> </form> ); }; export { LoginForm };
效果顯示如下
小結(jié)
到這里完成一個簡易的React Login Form, 然而現(xiàn)實(shí)中React Form的問題還有很多, 隨著學(xué)習(xí)的深入,會繼續(xù)探索Form實(shí)用的復(fù)雜性,更多關(guān)于React特征Form數(shù)據(jù)管理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React+Antd 實(shí)現(xiàn)可增刪改表格的示例
這篇文章主要介紹了React+Antd實(shí)現(xiàn)可增刪改表格的示例,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號操作
這篇文章主要介紹了ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號操作 的相關(guān)資料,需要的朋友可以參考下2016-04-04react ant protable自定義實(shí)現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實(shí)現(xiàn)搜索下拉框,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06用React實(shí)現(xiàn)一個類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實(shí)現(xiàn)一個類 chatGPT 的交互式問答組件的方法,文中有詳細(xì)的代碼示例,對我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06React路由中的redux和redux知識點(diǎn)拓展
這篇文章主要介紹了React路由中的redux和redux知識點(diǎn)拓展,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的朋友可以參考學(xué)習(xí)一下2022-08-08