Zenn
Open3

JavsScript

JavaScript
ピン留めされたアイテム
RyoheiRyohei

記憶を定着させるために、簡単に復習する様で使っていこ〜

RyoheiRyohei
const object1 = { a: 1, b: 2, c: 3 };

const object2 = Object.fromEntries(
  Object.entries(object1).map(([key, val]) => [key, val * 2]),
);

console.log(object2);
// { a: 2, b: 4, c: 6 }

このコードが個人的に納得できない。
もっと簡単に書ける方法はないのか、、

RyoheiRyohei

react-hook-form

controlled component（制御コンポーネント）

  • 自身で状態を保持しており、ユーザーの入力に基づいて状態を更新する。
  • 値の更新はuseState()を用いる。
  • stateの更新が行われるので、再レンダリングされる。

uncontrolled component（非制御コンポーネント）

  • データはDOM自身が保持する。
  • Reactはrefを利用して、DOMから値を取得する。
  • defaultValue 属性（初期値）を指定することができる。
    • これを指定すると、設定した値がフォーム要素にあらかじめ入力された状態で初回のレンダリングが行われる。
  • defaultChecked属性（あらかじめチェックをつけておく）もある。
  • レンダリングが走らないので、パフォーマンスが良い

MUIの場合：controlled・uncontrolledどちらの使い方もできる。
React Hook Formの場合：基本的にuncontrolledな使い方しかできない。

  const { control, formState, handleSubmit, getValues } = useForm<UserPasswordResetRequest>({
    defaultValues: { email: '' },
    mode: 'onChange',
  })
         <Controller
            control={control}
            name="email"
            rules={{ required: 'この項目は空白にできません' }}
            render={({ field: { onChange, value } }): JSX.Element => (
              <TextField
                label="Eメールアドレス"
                autoComplete="off"
                value={value}
                onChange={(e): void => {
                  onChange(e)
                  handleChange()
                }}
                error={formState.errors.email?.message?.toString()}
              />
            )}
          />
  • field
    • onChangeとvalueがある。
  • formState
    • formStateが状態を管理している。