やりたいこと

Next.js + antDesignで
モーダル内に入力フォームを作り、モーダルのOKボタンを押したら
モーダル内のフォームの値をhandleDoSomething関数に渡して実行する。

useFormを使ったやり方を正しくリファクタリングしてもらった時のメモ。

<Form form={form} onFinish={handleFinish}>と
form.submitの組み合わせで実装できる。

コード

Before

const [form] = Form.useForm()
const handleDoSomethingModal = (id: string) => {
    Modal.confirm({
      title: "本当に〇〇しますか？",
      icon: <ExclamationCircleOutlined />,
      onOk: () => handleDoSomething(id, form.getFieldValue("reason")),
      onCancel: () => form.resetFields(),
      content:
        <Form form={form}>
          <Form.Item name="reason">
            <Input.TextArea rows={4} placeholder="理由" />
          </Form.Item>
        </Form>
    })
  }

After

const [form] = Form.useForm()
const handleDoSomethingModal = (id: string) => {
    const handleFinish = (value: any) => {
      handleDoSomething(id, value.reason)
    }

    Modal.confirm({
      title: "本当に〇〇しますか？",
      icon: <ExclamationCircleOutlined />,
      onOk: () => form.submit(),
      onCancel: () => form.resetFields(),
      content:
        <Form form={form} onFinish={handleFinish}>
          <Form.Item name="reason">
            <Input.TextArea rows={4} placeholder="理由" />
          </Form.Item>
        </Form>
    })
  }