React Hooks でオブジェクトを気持ちよく扱う

ツイート
2021年08月26日
2021年08月26日

実装

jsx
import { useState } from 'react' const [user, setUser] = useState(initUser) const handleChange = (e) => { const target = e.target const value = e.value const name = e.name if (name in user) { const updateItem = {...user, [name]: value} // 👈 ポイント setUser(updateItem) } }
jsx
<input type="text" name="username" value={user?.username || ''} onChange={handleChange} id="username" />

onBlurで保存とかしても良いかも