そもそも下記のコードは何がしたいのか？
- inputに入力した値を取り出してuseStateで管理したい。
- なぜなら入力した値を用いて投稿だったり編集ができるから。
HogeHoge
const HogeHoge = () => {
const [neko, setNeko] = useState({ title: '' })
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setNeko({
...neko,
[e.target.name]: e.target.value,
})
}
return (
<div>
<label htmlFor="title">タイトル</label>
<input
type="text"
name="title"
id="title"
onChange={handleChange}
value={neko.title}
/>
</div>
)
}
export default HogeHoge
まずuseStateを使ってnekoの初期値を設定しています。
ここではキーがtitleで値が空のオブジェクトを、nekoの初期値として設定しています。
HogeHoge
const [neko, setNeko] = useState({ title: '' })
そしてsetNekoという更新関数を用いてnekoの値を更新
-
ここでnekoの初期値をスプレッド構文で展開しています。つまり
...nekoによってtitle: ''が取り出されています。その空の値がsetNekoのオブジェクトに代入されています。要するにオブジェクトがクローンされています。 -
そして[e.target.name]: e.target.valueの値が挿入されていきます
HogeHoge
const [neko, setNeko] = useState({ title: '' })
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setNeko({
...neko,
[e.target.name]: e.target.value,
})
}
オブジェクトクローンの例
const foo = { a: 1, b: 2 };
const bar = { ...foo }; // => { a: 1, b: 2 }
[e.target.name]: e.target.valueとは
-
inputタグのnameの値と、inputタグのvalueの値を指します。
-
今回はnameが
titleで、valueがneko.titleです。こうすることでinputタグが2個3個と増えてもname属性とvalue属性を参照しているので、入力値をstateで管理できます。 -
また、value属性は入力した値そのものを指します。つまり今回はnekoというオブジェクトのtitleの値が、inputタグのvalue属性になります。
HogeHoge
<input
type="text"
name="title"
id="title"
onChange={handleChange}
value={neko.title}
/>
nekoの出力をコンソールで見てみます
HogeHoge
const [neko, setNeko] = useState({ title: '' })
console.log(neko)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setNeko({
...neko,
[e.target.name]: e.target.value,
})
}
- 最初は空の文字列ですが文字を入力すると、setNekoにvalue属性の値が渡ってきて、nekoが更新されていきます。
- このnekoをAPI及びDBの通信に適用することで投稿機能や編集機能が作れます。