フロントエンドを開発していると、ユーザーが入力した文字列や、選択した値を状態として保存し、サーバーに変数として送信したい時があります。 そのような場合には以下のガイドに従って実装してください。

​
状態の宣言: defineState()

状態の宣言には defineState() を使用してください。defineState() は、オブジェクトを引数に取り、初期値として設定します。

import { defineState } from "@morph-data/components";

export const topPageState = defineState({
  dateRangeStart: new Date(),
  dateRangeEnd: new Date(),
  industry: "All",
});

​
状態の値にアクセスする: .value

宣言した状態の値には、以下のように .value プロパティを呼び出すことでアクセスできます。

<>
  now: {topPageState.dateRangeStart.value.toLocaleString()}
  industry: {topPageState.industry.value}
<>

Tips この例のように、 topPageState. と defineState() で宣言した変数名を毎回指定するのが面倒な場合は、変数を分割代入することで短縮することができます。

const { dateRangeStart, dateRangeEnd, industry } = defineState({
  dateRangeStart: new Date(),
  dateRangeEnd: new Date(),
  industry: 'All',
});

​
状態の更新: .update()

状態を更新するには、 update() メソッドを使用してください。

<Button onClick={() => topPageState.dateRangeStart.update(new Date())}>
  Reset date
</Button>

​
入力コンポーネントの利用

Morph フレームワークでは、 defineState() で宣言した状態に対して、ユーザー入力を反映させるためのコンポーネントが用意されています。

詳しくは、入力コンポーネントを参照してください。

入力コンポーネントを使用すると、簡単にユーザー入力を状態に反映させることができます。

import { defineState } from '@morph-data/components';

export const topPageState = defineState({
  dateRangeStart: new Date(),
  dateRangeEnd: new Date(),
});

# My Data App page

Showing stock prices from {topPageState.dateRangeStart.value.toLocaleString()} to {topPageState.dateRangeEnd.value.toLocaleString()};

<DateRangePicker
  state={[
    topPageState.dateRangeStart,
    topPageState.dateRangeEnd
  ]}
/>

​
データコンポーネントに値を渡す

データコンポーネントは variables というプロパティを受け取ることができるようになっています。 このプロパティに defineState() で宣言した状態の値を渡すことで、ユーザーが入力した値を Python 関数や SQL ファイルに渡すことができます。

ここまで見てきた機能を全て組み合わせることで、以下のようなデータアプリを完成させることができます。

import { defineState } from '@morph-data/components';

export const topPageState = defineState({
  dateRangeStart: new Date(),
  dateRangeEnd: new Date(),
});

# My Data App page

Showing stock prices from {topPageState.dateRangeStart.value.toLocaleString()} to {topPageState.dateRangeEnd.value.toLocaleString()};

<DateRangePicker
  state={[
    topPageState.dateRangeStart,
    topPageState.dateRangeEnd
  ]}
/>

<DataTable
  alias="stocks"
  variables={{
    start_date: topPageState.dateRangeStart,
    end_date: topPageState.dateRangeEnd
  }}
/>