react-hook-form

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { DatePicker, Stack, PrimaryButton, TextField } from '@fluentui/react';

type FormData = {
  datePicker1: Date | null;
  textField1: string;
  textField2: string;
};

function App() {
  const { control, handleSubmit } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log('Form data:', data);
  };

  return (
    <div className="App">
      <h1>Fluent UI Date Picker and TextFields Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Stack tokens={{ childrenGap: 15 }}>
          <Controller
            name="datePicker1"
            control={control}
            defaultValue={null}
            render={({ field }) => (
              <DatePicker
                label="Select a date"
                value={field.value}
                onSelectDate={(date) => field.onChange(date)}
              />
            )}
          />
          <Controller
            name="textField1"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <TextField
                label="Text Field 1"
                value={field.value}
                onChange={(_, value) => field.onChange(value)}
              />
            )}
          />
          <Controller
            name="textField2"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <TextField
                label="Text Field 2"
                value={field.value}
                onChange={(_, value) => field.onChange(value)}
              />
            )}
          />
          <PrimaryButton text="Log to Console" type="submit" />
        </Stack>
      </form>
    </div>
  );
}

export default App;

このコードは、TypeScriptで書かれており、FormData型を使用してフォームデータの型を定義しています。useForm()を使用してフォームを設定し、Controllerコンポーネントを使ってフォームの各フィールドを制御しています。データを送信する際には、onSubmitハンドラでフォームデータをログに出力しています。