【Django×React 】動的に初期値を入力 FormikでupdateViewを作る

React

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

React × DjangoのWebアプリで、formikを使用してます

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

という方へ向けて、

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アプリを作り、ネットで公開するまで」を解説しているサイトです。

日報アプリを一から開発し、ウェブに公開するまではこちらにまとめています

また、公開したウェブアプリはこちら(https://nippo.itc-app.site)でご覧いただけます(公開後もアップデート中)

 

その他、各分野別に

  1. Pythonについて
  2. HTML・CSSについて
  3. Djangoフレームワークについて
  4. Webサーバーについて
  5. 実際に公開をする方法

を記載したページも用意しています

 

ご自身の目的に合わせて、お好きな箇所からご覧ください

404 NOT FOUND | ITCブログ
今の自分にチャレンジする

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

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