react hookフォームのwatchを使用して入力をチェック

공식 문서[MDN]
react hook formを使用して作成されたページ
入力値に基づいてuseform値を返す関数が必要で、入力値がボタンに色を追加し、値が削除色のUIをクリアします.
watchとgetValuesは2種類あり、最初はgetValuesを使っていました.
getValues関数は、値を変更するときにすぐにスタイルを適用しないので、watchに変更した後、入力/削除と同時に必要な色の関数をすぐに追加または削除することができます.
検索すると、getValuesはwatchとは異なり、再レンダリングが起こらない可能性があります.setStateみたいなやつ...

watch()

これは、指定した入力(watch)を観察し、これらの値を返してレンダリングするターゲットを決定する場合に便利です.

defaultValueが定義されていない場合、watchの最初のレンダリングは、レジスタが呼び出されていないため、未定義を返します.ただし、2番目の引数としてdefaultValueを設定することで値を返すことができます.

useFormでdefaultValuesとして定義されている場合、最初のレンダリングはdefaultValuesに適用されたコンテンツを返します.

getValues()

フォームの値を読み込みます.watchとは異なり、getValuesは入力値の変更を再有効または購読しません.この関数の使用方法は次のとおりです.

getValues():フォームの完全な値を読み込みます.

getValues(「test」):フォーム内の入力値を読み込みます.name.

getValue(「test」>「test 1」):複数の値を読み込むために入力したname属性を指定します.

watch()を使用して、4つの値をすべて入力するときにボタンの色を変更します。

1. BoardWrite.container.js

onChangeのイベント関数を呼び出して、検証する値が空かどうかを決定します.
値が空の場合はisActiveのtrueに値を変更し、値が空の場合はfalseに値を変更します.
watchを使用してイベントが発生したinputの値を検証すると、関数は終了してレンダリングされ、入力と同時に値は変更されず、他のinputの値を変更して値を読み出す必要があります.
したがって、この入力値はe.targetである.valueと呼ばれています.

    const [isActive, setIsActive] = useState(true);
    const onChangeWriter = (e)=>{
        e.target.value &&  watch("password") &&  watch("title") &&  watch("contents") ? setIsActive(false) : setIsActive(true)
    }
    const onChangePassword = (e)=>{
        e.target.value &&  watch("writer") &&  watch("title") &&  watch("contents") ? setIsActive(false) : setIsActive(true)
    }
    const onChangeTitle = (e)=>{
        e.target.value &&  watch("writer") &&  watch("password") &&  watch("contents") ? setIsActive(false) : setIsActive(true)
    }
    const onChangeContent = (e)=>{
        e.target.value &&  watch("writer") &&  watch("password") &&  watch("title") ? setIsActive(false) : setIsActive(true)
    }

2. BoardWrite.presenter.js

各入力のonChangeを呼び出し、上記で宣言した関数を加えます.

<InputWrapper>
	<Label>작성자<Required>*</Required></Label>
	<ShortInput {...props.register("writer", { required: true })} onChange={e=>props.onChangeWriter(e)}  type="text" placeholder="이름을 적어주세요."/>
	{props.errors.writer && <Error>이름을 입력해주세요.</Error>}
</InputWrapper>
<InputWrapper>
	<Label>비밀번호<Required>*</Required></Label>
	<ShortInput {...props.register("password", { required: true })} onChange={e=>props.onChangePassword(e)}  type="password" placeholder="비밀번호를 입력해주세요."/>
	{props.errors.password && <Error>비밀번호를 입력해주세요.</Error>}
</InputWrapper>
<InputWrapper>
	<Label>제목<Required>*</Required></Label>
	<Input {...props.register("title", { required: true })} onChange={e=>props.onChangeTitle(e)}   type="text" placeholder="제목을 작성해주세요."/>
	{props.errors.title && <Error>제목을 입력해주세요.</Error>}
    <Label>내용<Required>*</Required></Label>
	<ContentInput {...props.register("contents", { required: true })} onChange={e=>props.onChangeContent(e)}  type="text" placeholder="내용을 작성해주세요."/>
	{props.errors.contents && <Error>내용을 입력해주세요.</Error>}
</InputWrapper>

3. BoardWrite.style.js

isActiveの値がtrueの場合、背景色は赤、そうでない場合は黄色(#FFD 600).

export const SubmitButton = styled.button`
  background-color: ${(props) => props.isActive ? "red" : "#FFD600;"};
	.
	.
	.
`