Reactでdata-driven-formsを使ってみる

data driven forms

JSONで渡したデータをもとに、動的にフォームを生成するために、data driven formsを使う。

Data Driven Forms converts JSON form definitions (schemas) into fully functional React forms with the provided set of features.
公式ページから引用

環境構築

• create react appを使ってReactの環境を作成

npx create-react-app data-driven-forms --template typescript

typescriptを使うため、--template typescriptで作成

• 作成したファイルに移動する

cd data-driven-forms

data driven formsの準備

• data driven formsを使うにはform rendererのインストールと使用するコンポーネントの選択が必要。ここで使用するコンポーネントはAnt Design を選択。
• form rendererのインストール

yarn add @data-driven-forms/react-form-renderer

• Ant Designをインストール

yarn add antd

yarn add @data-driven-forms/ant-component-mapper

Ant Designのラジオボタンを表示する

1. Radiobutton.tsxを作成し、必要なモジュールをインポートする。

Radiobutton.tsx

import React from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import FormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
import 'antd/dist/antd.css'

import radiobutton from './schema'

2. ラジオボタンを表示させるためのschemaを定義する

schema.ts

const radiobutton = {
    "fields": [
        {
            "component": "radio",
            "label": "Radio",
            "name": "radio",
            "options": [
                {
                    "label": "Dogs",
                    "value": "1"
                },
                {
                    "label": "Cats",
                    "value": "2"
                },
                {
                    "label": "Hamsters",
                    "value": "3"
                }
            ]
        }
    ]
};

export default radiobutton

3.Radiobutton.tsxのreturnに描画処理を追加

Radiobutton.tsx

export const Radiobutton = () => {
    return (
        <div style={{ margin: 24 }}>
            <FormRenderer
                schema={radiobutton}
                FormTemplate={FormTemplate}
                componentMapper={componentMapper}
                onSubmit={console.log}
            />
        </div>
    )
}

onSubmit={console.log}だとonSubmitが実行されない

→ onSubmit={value => console.log(value)}とするとonSubmitが実行されるようになった
(REACT FINAL FORMのFAQページ中盤のVia Closure部分)

Radiobutton.tsx

export const Radiobutton = () => {
    return (
        <div style={{ margin: 24 }}>
            <FormRenderer
                schema={radiobutton}
                FormTemplate={FormTemplate}
                componentMapper={componentMapper}
                onSubmit={value => console.log(value)}
            />
        </div>
    )
}

同じものをクラスで書くと下記のようになります。

Radiobutton.tsx

class Radiobutton extends Component {
    render() {
        return (
            <div style={{ margin: 24 }}>
                <FormRenderer
                    schema={radiobutton}
                    FormTemplate={FormTemplate}
                    componentMapper={componentMapper}
                    onSubmit={console.log}
                />
            </div>
        );
    }
}

export default Radiobutton;

4. App.tsxにRadiobuttonコンポーネントをインポートして表示する

App.tsx

import { Radiobutton } from './components/Radiobutton/Radiobutton'

function App() {
  return (
    <div className="App">
      <Radiobutton />
    </div>
  );
}

export default App;

ここまで完了後、実行すると下記のようになりました。

5．schemaの読み込みをJSONから行う

• schema.tsで定義しているschemaをJSONで読み込むように変更する
  src直下にschemaフォルダを作成。そこにradioButton.jsonファイルを作成。
  ファイルの中身はschema.tsと同じです。

radioButton.json

{
    "fields": [
        {
            "component": "radio",
            "label": "Radio",
            "name": "radio",
            "options": [
                {
                    "label": "Dogs",
                    "value": "1"
                },
                {
                    "label": "Cats",
                    "value": "2"
                },
                {
                    "label": "Hamsters",
                    "value": "3"
                }
            ]
        }
    ]
}

• 作成したJSONをRadiobutton.tsxでインポートする

Radiobutton.tsx

import radiobutton from '../../schemas/radioButton.json'

radiobuttonとしてインポートし、schemaに渡す。

Data-Driven-FormsでAnt Designのラジオボタンの表示ができました。

他のcssフレームワークを使う場合も基本的な流れは同じです。