3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

『inputタグのvalue属性をe.target.valueを用いてuseStateに管理する』の意味が分からなかったので調べた

Last updated at Posted at 2022-02-23

#そもそも下記のコードは何がしたいのか?

  • 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,
    })
  }

スクリーンショット 2022-02-23 0.12.03.png
スクリーンショット 2022-02-23 0.13.59.png

  • 最初は空の文字列ですが文字を入力すると、setNekoにvalue属性の値が渡ってきて、nekoが更新されていきます。
  • このnekoをAPI及びDBの通信に適用することで投稿機能や編集機能が作れます。
3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?