kintone-React自習 5日目「kintoneアプリ連携」

2022年2月1日 18:57

「How To Build Forms in React」の2日目。
チュートリアルを最後までやって、その後kintoneアプリにチュートリアルで作成したReactのフォームからデータ登録する。

Submitボタンにイベントハンドラの追加

Submitボタンを押下した時のイベントをキャプチャして動作する仕組みを実装する。

・form要素にonsubmitプロパティを追加。
・onsubmitプロパティにイベントハンドラを追加。

      <form onSubmit={handleSubmit}>

handleSbumitイベントハンドラを追加。

useStateフック

handleSubmit関数にuseStateフックを利用して、状態を追加する。

const [state, setState] = useState(initialState);

フック API リファレンス

useStateフックについては下記を参照

チュートリアル Step 2

useReducerフック

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState の代替品です。(state, action) => newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch メソッドとペアにして返します

フック API リファレンス

チュートリアル Step 3

チュートリアル通り。

チュートリアル Step 4

チュートリアル通り。

入力フォームをkintoneに接続する

チュートリアルの入力フォームをDBと接続する。
DBはkintone。kintoneについては下記参照。

https://developer.cybozu.io/hc/ja

kintone-rest-api-client

Reactのフロントエンドからkintoneに接続するライブラリに、kintone-rest-api-clientを利用する。使い方などは下記を参照。

package.jsonに追加して、npm installする。

  "devDependencies": {
    "@kintone/rest-api-client": "^2.0.33",
・・・

kintoneアプリの型情報の生成

goqooを使って、kintoneアプリの型情報(dtsファイル)を生成する。
方法は下記参照。

最初に、goqoo.config.types.ts を修正する。
次に、goqoo.config.js を修正。
.env ファイルに認証情報を追加。
ここまで設定できたらプロジェクトルートディレクトリにて、 `npx goqoo generate dts` する。
dtsディレクトリにdtsファイルが生成されます。

フォームデータの登録

変更した箇所を記載。
App.tsxを変更。

import type { IndexEvent } from 'types'
import { context } from 'context'
import { KintoneRestAPIClient } from "@kintone/rest-api-client"
・・・
const putRecord = (appid: number, formdata: any) => {
  const client = new KintoneRestAPIClient();
  type OrderSheet = {
    "name": kintone.fieldTypes.SingleLineText
    "apple": kintone.fieldTypes.SingleLineText
    "count": kintone.fieldTypes.Number
    "gift_wrap": kintone.fieldTypes.CheckBox
  }
  const wraped = formdata["gift-wrap"] ? ['gift-wrap'] : []
  const AppleOrder: OrderSheet = {
    "name": {"value": formdata.name},
    "apple":  {"value": formdata.apple},
    "count": {"value": formdata.count},
    "gift_wrap": {"value": wraped}
  }
  const params = {
    app: appid,
    record: AppleOrder,
  };
  client.record.addRecord(params).then((resp) => {
    console.log(resp); // eslint-disable-line no-console
  }).catch((err) => {
    console.log(err.id); // eslint-disable-line no-console
    console.log(err.code); // eslint-disable-line no-console
    console.log(err.headers); // eslint-disable-line no-console
    console.log(err.message); // eslint-disable-line no-console
  });  
}
・・・
function App() {
  const [formDataState, setFormData] = useReducer(formReducer, {
    count: 100,
  })
  const [submitting, setSubmitting] = useState(false)

  const handleSubmit = (event: any) => {
    event.preventDefault()
    setSubmitting(true)
    putRecord(context.appId.demo, formDataState)
    setTimeout(() => {
      setSubmitting(false)
      setFormData({reset: true})
    }, 3000)
  }

  const handleChange = (event: any) => {
・・・
       <button type="submit">Submit</button>
      </form>
    </div>
  )
}

// export default App;

kintone.events.on('app.record.index.show', async (event: IndexEvent<kintone.types.SavedDemoFields>) => {
  const container = document.getElementById('react-sample-container')
  if (!container) {
    return event
  }
  ReactDOM.render(<App />, container);
  return event
})

参考：

cybozu developer network
https://developer.cybozu.io/hc/ja

kintone JavaScript Client (@kintone/rest-api-client)
https://developer.cybozu.io/hc/ja/articles/900000767263

kintone API フィールド形式
https://developer.cybozu.io/hc/ja/articles/202166330

kintone API レコードの登録（POST）
https://developer.cybozu.io/hc/ja/articles/202166160

この記事が気に入ったらサポートをしてみませんか？