【React/Formik】setFieldValueの使い方

React

(最終更新月:2021年7月)

フロントエンドをReact、バックエンドをDjangoのWebアプリで、formikを使用してます。

「formikでアップデートビューを作りたい!」

「setFieldValueの使い方が知りたい!」

という方へ向けて、

formikで動的に初期値を入力する方法

を解説します。

formikでvalueを変更する「setFieldValue」

<Formik>タグ内で{ }で囲った関数を記述

返り値を子要素として<Formik>内に反映させることができます

<Formik>
    {() => {
        return (
                <返す値>
                )
    }
</Formik>

この関数を使用することで、Formikに用意された様々な関数などを受け取ることができます

その中で、setFieldValueというフォーム内の値を書き換える関数を受け取りましょう

<Formik>
    {(setFieldValue) => {
        return (
                <返す値>
                )
    }
</Formik>

setFieldValueを使い、apiから受け取った値をフォームへ入力しましょう

ポイントは、useEffect関数内でsetFieldValueを使うこと!

{({setFieldValue})=>{
      useEffect(() => {
         <データを受け取りobjという変数へ格納>
             setFieldValue("title", obj.title, false)
             setFieldValue("content", obj.content, false)
             setFieldValue("public", obj.public, false)
    },[])
       return (
         ....
     )

setFieldValueの書き方は、

setFieldValue(値のフィールド名、値、バリデーションチェック)

(※詳しくは公式ドキュメントをご覧ください)

コード例

関係ありそうな部分を抜粋してご紹介します↓

....
const slug = props.match.params.slug
....

return (
        <Formik 
            ....
        >
            {({values, setFieldValue})=>{
                useEffect(() => {
                    if (slug !== undefined) {
                        fetch(`/nippoApp/api/${slug}/`, getLookupOptions)
                            .then(res => {
                                return res.json()
                            })
                            .then(obj => {
                                setFieldValue("title", obj.title, false)
                                setFieldValue("content", obj.content, false)
                                setFieldValue("public", obj.public, false)
                            })
                        }
                },[])
                return (
                     ....
     )
         </Fromik>
)

まとめ

言葉で簡単にまとめると、

  • <Formik>子要素としての関数をしようすること
  • 引数として、setFieldValueを受け取り、
  • useEffect内に記述する

となります。

最後までご覧頂きありがとうございました!!!

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

公式LINEも始めました。ブログの更新や最新の業界情報などを随時配信します!

友だち追加

タイトルとURLをコピーしました