// hooks/useObjectState.js
import { useState } from 'React'
function useObjectState(obj){
const [formData, setFormData] = useState(obj)
const handleSetFormData = (key, value) =>{
formData[key] = value
setFormData({...formData})
}
return [formData,handleSetFormData]
}
export default useObjectState
// hooks/index.js
import useObjectState from './useObjectState'
export {
useObjectState
}
import { useObjectState } from '../hooks'
import './Login.css'
function Login (props){
const [formData, handleSetFormData] = useObjectState({
username:'',
password:'',
})
return (
<div className='p-login'>
{JSON.stringify{formData}}
<form action=''>
<div>
<input type='text' value={formData.usename}
onChange={(e)=>{
handleSetFormData('username', e.target.value)
}}
placeholder='请输入账号'
/>
</div>
<div>
<input type='text' value={formData.password}
onChange={(e)=>{
handleSetFormData('password', e.target.value)
}}
placeholder='请输入账号'
/>
</div>
</div>
)
}
自己记录以防遗忘,手敲代码,未验证,请学习过程中自我鉴别哈,