ant designのFormを使ってみた

Ant Designを使ってみて、Formコンポーネントで一瞬つまったのでめも

概要

• AntDesignは、Reactのプロジェクトでデザインを楽にしてくれるやつ
• Formの基本的な使い方
• つまったところ & 解決法

Formの使い方

<Form>の中に<Form.Item>をネストして、<Form.Item>の中にInputとかSelectとかを入れていく

最低限のFormの例

// 省略
import { Form, Input, Button } from 'antd';

const FormComponent = () => {
  // フォーム送信の処理
  const onFinish = values => console.log(values)

  return (
    // 表示されるフォーム
    <Form onFinish={onFinish}>
      <Form.Item name="user" label="ユーザ名">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="パスワード">
        <Input.Password />
      </Form.Item>
      <Form.Item name="password" label="パスワード">
        <Button htmlType="submit">
          送信
        </Button>
      </Form.Item>
    </Form>
  )
}

export default FormComponent

つまったとこ

onFinishを実行すると、consoleに{}が表示された i.e. valuesが空だった

→解決法: Form.Itemにnameを設定する

最後のhtmlType="submitを持つ<Button>を押すと、onFinishが実行されるのですが、最初にFormを書いてたときに、Form.Itemのnameを書いてませんでした
これが原因で、onFinishの引数valuesに値が渡ってませんでした

nameを入れたら、onFinishの結果が

{ name: value }

にちゃんとなりました