react-hook-from textareaの値を改行区切りで取得する

react react-hook-form

管理画面系などたまーに下記の画像のように改行区切りで値を取得したい時があります。 console そんなときは、サンプルコードのようにすればyupと組み合わせたときでも問題なく値を取得することが可能です。 import { NextPage } from 'next'; import { Cont…

#React #Next.js #yup #react-hook-form #typesciprt

2022-06-19

react-hook-form #2 validationを行いたい(yup)

react react-hook-form

大変便利なreact-hook-form。便利なreact-hook-formにはdefaultで使えるvalidation機能があります。 <input {...register('firstName', { required: true, max: { value: 10, message: 'error' } })} /> このような形でregisterで登録するときに、optionsを指定すれば、ある程度のvalidationを実装することは可能です。ただ、複数の入力項目になった場合、c…

#React #Next.js #yup #react-hook-form

2022-06-08

react-hook-form #1 stateまみれのcomponentを改善したい

react react-hook-form

目的 reactのform componentを書くときに入力値をstateで管理して、stateまみれのcomponentを作ってしまって可読性を下げてしまうことってありませんか？例えば、こんな感じ。 import {NextPage} from 'next'; import {useState} from 'react'; const Start…