ビュー
コードエディター
フォーム

フォーム

ベースマキナには、フォームを作成するための組み込みのコンポーネントが用意されています。

状態はFormコンポーネントによって管理されており、以下の入力コンポーネントを組み合わせて使うことで、少ないコード量でフォームを作成できます。

また、外部ライブラリの@chakra-ui/reactを使ってもフォームを作成できます。 その場合、組み込みのFormコンポーネントによる状態管理は使えないため、「コード取得設定」を活用して、react-hook-formなどの使い慣れたフォームの状態管理ライブラリを利用することもおすすめです。

基本的な使い方

以下は、Formコンポーネントと各種入力コンポーネントを組み合わせた基本的な使用例です。

import {
  DateTimePicker,
  Grid,
  Flexbox,
  Box,
  Form,
  TextInput,
  Button,
  executeAction,
} from "@basemachina/view";
 
const App = () => {
  const handleSubmit = ({ values }) => {
    executeAction("action-id", {
      id: values.id,
      email: values.email,
      registered_at_from: values.registered_at_from,
      registered_at_to: values.registered_at_to,
    });
  };
 
  return (
    <Form
      initialValues={{
        email: "sample@test.com",
        id: "sample",
        registered_at_from: "2020-04-01T10:00",
        registered_at_to: "2028-03-31T18:00",
      }}
      onSubmit={handleSubmit}
    >
      <Flexbox direction="col">
        <Grid repeatCount={3}>
          <Box>
            <TextInput name="id" label="ID" />
          </Box>
          <Box>
            <TextInput name="email" label="メールアドレス" />
          </Box>
          <Box>
            <p className="text-sm font-bold">登録日時</p>
            <Flexbox items="center" justify="between">
              <DateTimePicker name="registered_at_from" />
              <span>-</span>
              <DateTimePicker name="registered_at_to" />
            </Flexbox>
          </Box>
        </Grid>
        <Button type="submit" title="検索" color="blue" />
      </Flexbox>
    </Form>
  );
};
export default App;
使用例
  • FormのinitialValues propsで、フォームの初期値を設定できます。オブジェクトのプロパティ名は、各入力コンポーネントのname propsの値と一致している必要があります。
  • FormのonSubmit propsで、フォームの送信時の処理を定義できます。第一引数のvaluesプロパティに、フォームの入力値のオブジェクトが渡されるので、これを利用して送信処理を実行します。valuesもオブジェクトであり、プロパティ名は各入力コンポーネントのname propsの値と一致しています。

入力コンポーネントの詳細な使い方については、各コンポーネントのページをご覧ください。

value, onChange propsの使い方

「特定のCheckboxの値が変化したときに別のTextInputの値を変更する」といったような複雑なユースケースを実現したい場合、入力コンポーネントにvalueとonChange propsを設定する必要があります。

import { Form, Checkbox, TextInput, Button, Flexbox } from "@basemachina/view";
import { useState } from "react";
 
const App = () => {
  const [email, setEmail] = useState("customer@basemachina.com");
 
  return (
    <Form onSubmit={console.log}>
      <Flexbox direction="col">
        <Checkbox
          name="isActive"
          label="有効化する"
          onChange={(e) => setEmail("")}
        />
        <TextInput
          name="email"
          label="メールアドレス"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Button type="submit" title="送信" color="blue" />
      </Flexbox>
    </Form>
  );
};
export default App;
value, onChange propsの使用例

この例では、TextInputの値をuseStateで管理し、Checkboxが変更されたときにTextInputの値を空にしています。

注意点

valueとonChange propsを設定している場合でも、FormのonSubmit propsでは現在のフォームの状態のオブジェクトが渡されます。 ただし、入力コンポーネントにvalueで渡している値と、FormのonSubmit propsで受け取れる値が一致しないこともあります。 上記の例では、画面が表示されたあと、メールアドレスを変更せずにそのまま送信ボタンを押した場合、FormのonSubmit propsに渡される引数からはemailの値を取得できません。 この問題は次のいずれかの方法で回避できます。

  • FormのinitialValuesのemailプロパティにuseStateの引数と同じ値（ここでは"customer@basemachina.com"）を設定する
  • FormのonSubmit propsで引数を利用せず、useStateで管理している値（ここではemail）を直接利用する
ChartForm