【TypeScript】react-tags-inputを使って検索フォームの実装【React】 - 山下誠二郎のITとフォートナイトと野球ブログ

前書き

前回「React-tags-inputモジュールを用いてタグフォームの実装する」記事を書きました。
今回はTypeScriptファイル用にうまく動かしてみます。
melheaven.hatenadiary.jp

こちらはReact-Tag-InputモジュールのREAD MEです。非常に分かりやすく書かれています。
betterstack.dev

可読性を向上させるために、
検索フォームと画面でコンポーネントを分割しました。
Hookとは関数コンポーネント内で、stateのようなReactの機能を使うためのものです。
クラスではHookは機能しない？ので、今回は関数ベースで実装します。

実装

親コンポーネント（Submit.tsx）

最初にuseStateの引数として与えているデータは初期値です。
ここからフォーム部分を子コンポーネントとして、ファイルを分割しています。

e.persist()

Eventへのアクセスを非同期で実行できるようになるおまじない。

具体的な記事
medium.com

分かりやすい記事
blog.nakanishy.com

e.preventDefault();

特に指定がない場合、現在のURLに対してフォームの送信がなされ、結果的にリロードになります。
指定がない場合（Default）にリロード処理（Event）を妨げる（Prevent）役割を果たしています。

import React, { useState } from 'react'
import SubmitForm from './SubmitForm'

export const Submit: React.FC = () => {

    const [state, setState] = useState(['新聞'])

   const submitFormSend = (e: React.MouseEvent) => {
        e.persist();
        e.preventDefault();
        setState(state)
        if (state.length == 0) {
            alert('タグを入力してください');
        } else {
            sendBack(state)
        }

    return (
        <>
            <form>
                <SubmitForm tag={state} setValue={setState} />
            </form>
            <div>
                <button onClick={submitFormSend}>送信</button>
            </div>
        </>
    )
}

export default Submit;

子コンポーネント（SubmitForm.tsx）

子コンポーネント→親コンポーネントにデータを受け渡しをします。
親コンポーネントにおいてあらかじめ定義したstate（タグ情報）を子コンポーネントから制御しました。

toge510.com

import React, { useEffect } from "react";
import ReactTagInput from "@pathofdev/react-tag-input";
import "@pathofdev/react-tag-input/build/index.css";

interface FormListProps {
    tag: string[],
    setValue: React.Dispatch<React.SetStateAction<string[]>>
}

export const SubmitForm: React.FC<FormListProps> = ({ tag, setValue }) => {
    const [tags, setTags] = React.useState(tag)

    useEffect(() => {
        setValue(tags)
    })

    return (
        <React.Fragment>
            <ReactTagInput
                placeholder="入力してください"
                maxTags={4}
                tags={tags}
                onChange={(newTags) => setTags(newTags)}
            />
        </React.Fragment>
    )
}

export default SubmitForm