Ohtani
勉強内容:useState2
見出し画像

勉強内容:useState2

Ohtani

気づいたら日付が変わってた٩( 'ω' )و
いっぱい書こうとすると挫折するので
今日も無理せず少なめです

import { useState } from 'react';
type NameType = {
  first: string;
  last: string;
};

const UseState2 = () => {
  const [name, setName] = useState<NameType>({ first: '', last: '' });
  return (
    <>
      <form>
        <input type='text' value={name.first} onChange={(e) => setName({ ...name, first: e.target.value })} />
        <input type='text' value={name.last} onChange={(e) => setName({ ...name, last: e.target.value })} />
      </form>
      <p>苗字:{name.first}</p>
      <p>名前:{name.last}</p>
    </>
  );
};

export default UseState2;

useState2

onChange→ 何か変更(文字を入力や消したり等)があった際に働く
{(e) => setName({ ...name, first: e.target.value })}
e→html のイベントハンドラー情報が返ってくる場所
...name→{ first: '', last: '' }を要素ごとに分解する。
分解しないとセットになっているため片方を変更するともう片方が消える
(値をコピーした新しいオブジェクトを生成して state に保存するの方が正しいかも。)
e.target.value→ イベントハンドラーの中の value をターゲットにする

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Ohtani
web制作を専門にやっているエンジニアです。自己学習のまとめや振り返りであったり日常のことを書いていきます