第5週反応:Ant-Designを使用してフォームを作成する

開発には多くの形式が必要です.文章の発表からコメントまで、いろいろなことを提出しますが、最初は難しいantdがとても役に立つと思っていたので、分かち合いたいと思って、5週目の主なテーマにしました.

反応フォームの使用🎨

antd公式ドキュメント抜粋:antd form

point公式ファイルをよく読んでください.答えは...

import { Form, Input, Button, Checkbox } from 'antd';

const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };


  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Formがリリースされる際、最も重要なのは、各プロジェクトをFormに変換することです.Itemで包みます.ではFormItemのnameは値を取得するキーとなる.antdのinputには個別のサブ値は指定できません.したがって、後続の記事の発生時に特定のテキストをインポートしてinputに入れる必要がある場合は、name=""が重要です.そしてテキスト変更はformです.setFieldsValue()を使用すればよい.

                 <Form.Item
                    name="title"
                    rules={[
                      {
                        required: true,
                        message: '제목을 입력하세요',
                      },
                    ]}
                  >
                    <Input
                      bordered={false}
                      placeholder="제목을 입력하세요"
                      className="title"
                    ></Input>
                  </Form.Item>

「文書の修正」ページの使用

ページを変更する作業は、ページを書くのと全く同じですが、既存のデータを受信するプロセスが必要です.このときform.setFieldsValue()はとても役に立ちます.

const [form] = Form.useForm()

//해당글 가져오기
  useEffect(() => {
    axios(`/games/${gameNo}`) //
      .then((response) => {
        console.log('해당글 가져옴?', response)
        const prevData = response.data
        
        //name="title"의 value 값을 가지고 왔다
        form.setFieldsValue({
          title: prevData.title,
     
        })
      })
  }, [])
        
  return (
    <div>          
        <Write>
            <Form form={form} onFinish={onFinish} courtInfo={courtInfo}>
                    <Form.Item
                      name="title"
                      rules={[
                        {
                          required: true,
                          message: '제목을 입력하세요',
                        },
                      ]}
                    >
                      <Input
                        bordered={false}
                        placeholder="제목을 입력하세요"
                        className="title"
                      ></Input>
                    </Form.Item>
                  <Button fs={'16px'} type="submit">
                    발행하기
                  </Button>
                </Flexbox>
            </Form>
          </Write>
    </div>
  )
}
        

まずはconst[form]=Formです.useForm()を宣言し、Formにform={form}を入れます.この2つのプロセスが先行しなければform.setFieldsValue()は動作しません.次回コメントウィンドウを作成するときにコメントを発行してinputウィンドウformをクリアしたいResetFields()をあちこちに置けないのではないでしょうか.もとは

<Form form={form}>

これはFormにform={form}がないからです.
最初は正式なドキュメントで何を言っているのか分かりませんでしたが、難しすぎてゼロにしたいと思っていましたが、期限のあるプロジェクトでは、とても役に立つライブラリのようです.やっぱり知っているのがパワー.