<p><code>setFieldValue</code>は、Promiseを返すので、awaitしてから、handleBlurでバリデーションを実行する</p>
<pre><code>&#x3C;TextField
  name="nam...

```ts
export function scrollToBottom(element: HTMLElement) {
  if (element.scrollTo) {
    element.scrollTo({
      top: Number.MAX_SAFE_INTEGER,
      behavior: 'smooth',
    })
    return
  }
  element.scrollTop = Number.MAX_SAFE_INTEGER
}
```

```ts
scrollToBottom($divRef.current)
```

## 参考
- [Number.MAX_SAFE_INTEGER - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)

【JavaScript】対象の要素を一番下までスクロールさせる

`setFieldValue`は、Promiseを返すので、awaitしてから、handleBlurでバリデーションを実行する

```ts
<TextField
  name="name"
  onBlur={async event => {
    const newValue = convert(formik.values.name)
    await formik.setFieldValue('name', newValue)
    formik.handleBlur(event)
  }}
/>
```

【Formik】onBlur時にフォームのバリデーションと変換処理

以下、Google Analyticsのカスタムイベントのコード

```ts
export const event1 = () => {
  window.gtag('event', 'example1', {
    event_category: 'example1',
    event_label: 'example1',
  })
}

export const event2 = () => {
  window.gtag('event', 'example2', {
    event_category: 'example2',
    event_label: 'example2',
  })
}
```

classのstaticメソッドに定義してexportすることで、importをシンプルにし、CustomEventクラスを使用することで、メソッドの使用箇所を明確にする。

```ts
export class CustomEvent {
  static event1 = () => {
    window.gtag('event', 'example1', {
      event_category: 'example1',
      event_label: 'example1',
    })
  }

  static event2 = () => {
    window.gtag('event', 'example2', {
      event_category: 'example2',
      event_label: 'example2',
    })
  }
}
```

【JavaScript】関数をまとめてexportする

```ts
/**
 * lockedAtから日を跨いでいる場合、trueを返す。それ以外は、falseを返す。
 * @param {string} target ロックした日時
 * @returns {boolean} 日を跨いでいる場合、trueを返す。それ以外は、falseを返す。
 */
export const isCrossDay = (target: string): boolean => {
  const targetDate = dayjs(target)
  const now = dayjs()
  return targetDate.isSameOrBefore(now, 'day') && !targetDate.isSame(now, 'day')
}
```

【JavaScript】対象の日付が日を跨いだか判定する

```ts
const kanaMap = {
  ｶﾞ: 'ガ',
  ｷﾞ: 'ギ',
  ｸﾞ: 'グ',
  ｹﾞ: 'ゲ',
  ｺﾞ: 'ゴ',
  ｻﾞ: 'ザ',
  ｼﾞ: 'ジ',
  ｽﾞ: 'ズ',
  ｾﾞ: 'ゼ',
  ｿﾞ: 'ゾ',
  ﾀﾞ: 'ダ',
  ﾁﾞ: 'ヂ',
  ﾂﾞ: 'ヅ',
  ﾃﾞ: 'デ',
  ﾄﾞ: 'ド',
  ﾊﾞ: 'バ',
  ﾋﾞ: 'ビ',
  ﾌﾞ: 'ブ',
  ﾍﾞ: 'ベ',
  ﾎﾞ: 'ボ',
  ﾊﾟ: 'パ',
  ﾋﾟ: 'ピ',
  ﾌﾟ: 'プ',
  ﾍﾟ: 'ペ',
  ﾎﾟ: 'ポ',
  ｳﾞ: 'ヴ',
  ﾜﾞ: 'ヷ',
  ｦﾞ: 'ヺ',
  ｱ: 'ア',
  ｲ: 'イ',
  ｳ: 'ウ',
  ｴ: 'エ',
  ｵ: 'オ',
  ｶ: 'カ',
  ｷ: 'キ',
  ｸ: 'ク',
  ｹ: 'ケ',
  ｺ: 'コ',
  ｻ: 'サ',
  ｼ: 'シ',
  ｽ: 'ス',
  ｾ: 'セ',
  ｿ: 'ソ',
  ﾀ: 'タ',
  ﾁ: 'チ',
  ﾂ: 'ツ',
  ﾃ: 'テ',
  ﾄ: 'ト',
  ﾅ: 'ナ',
  ﾆ: 'ニ',
  ﾇ: 'ヌ',
  ﾈ: 'ネ',
  ﾉ: 'ノ',
  ﾊ: 'ハ',
  ﾋ: 'ヒ',
  ﾌ: 'フ',
  ﾍ: 'ヘ',
  ﾎ: 'ホ',
  ﾏ: 'マ',
  ﾐ: 'ミ',
  ﾑ: 'ム',
  ﾒ: 'メ',
  ﾓ: 'モ',
  ﾔ: 'ヤ',
  ﾕ: 'ユ',
  ﾖ: 'ヨ',
  ﾗ: 'ラ',
  ﾘ: 'リ',
  ﾙ: 'ル',
  ﾚ: 'レ',
  ﾛ: 'ロ',
  ﾜ: 'ワ',
  ｦ: 'ヲ',
  ﾝ: 'ン',
  ｧ: 'ァ',
  ｨ: 'ィ',
  ｩ: 'ゥ',
  ｪ: 'ェ',
  ｫ: 'ォ',
  ｯ: 'ッ',
  ｬ: 'ャ',
  ｭ: 'ュ',
  ｮ: 'ョ',
  '｡': '。',
  '､': '、',
  ｰ: 'ー',
  '｢': '「',
  '｣': '」',
  '･': '・',
} as const

export function convertKanaHalfToFull(str: string) {
  let reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g')
  return str
    .replace(reg, s => {
      return kanaMap[s as keyof typeof kanaMap]
    })
    .replace(/ﾞ/g, '゛')
    .replace(/ﾟ/g, '゜')
}
```

【Formik】onBlur時にフォームのバリデーションと変換処理

Related

Tags

Share