為了提高我的React技能,我一直在嘗試構建可重用的表單狀態掛鉤和表單驗證器。我的自定義鉤子FormState用空字符串初始化一個對象,該對象的值將用作我的鉤子的初始狀態。我編寫了一個函數clearInputs,我希望將輸入重置為初始狀態,但無法更新。我一直在四處尋找答案,甚至參考此Stack Overflow帖子:使用React Hooks重置為初始狀態。仍然沒有骰子。// MY FORMSTATE HOOKimport { useState } from 'react';const FormState = props => { let initialState = { ...props }; const [ inputs, setInputs ] = useState(initialState); const [ errors, setErrors ] = useState(initialState); const handleInput = e => setInputs({ ...inputs, [e.target.name]: e.target.value }); const handleError = errs => setErrors({ ...errors, ...errs }); const resetForm = () => { setInputs({ ...initialState }); setErrors({ ...initialState }); }; const clearInputs = () => { console.log('SUPPOSED TO CLEAR', initialState) console.log('MY INPUTS', inputs) setInputs({ ...initialState }); console.log('AFTER THE SETTING', inputs) }; return [ inputs, handleInput, errors, handleError, resetForm, clearInputs ];};export default FormState;觸發clearInputs時,應將輸入重置為初始狀態。相反,什么也沒有發生。任何幫助都非常感謝。編輯:讓我進一步澄清。我表單中的每個字段都從輸入(用戶名,密碼1等)傳遞一個值。調用clearInputs時,它會清除鉤子中的輸入,但不會清除Field中的值。
重置useState的初始狀態
一只斗牛犬
2021-03-28 19:17:28
