상품 업로드 페이지 구현

Form

1. Form.Item

Form 발행시 각각의 아이템들을 Form.Item으로 감싸줘야한다.
그러면 Form.Item 안에 있는 name이 value값을 가져오는 key가 된다.

2. props

  • onFinish(prop):왜 쓰는거지? 몰라;
  • Divider: 중간에 실선으로 칸 나눠줌
  • placeholder: 맨 처음에 인풋의 값을 입력하지 않았을 때 보여주는 prop
  • rules: 인자를 배열로 넣어줘야 하며 안에 객체로 넣어줘야함.
    rules={[{required: true, message:'판매자 이름을 입력해주세요'}]}
    =해당 인풋이 입력되지 않으면 message가 뜸

3. Input

  • InputNumber: 숫자형 input
    defaultValue={0}
  • Input.TextArea: 줄바꿈도 되고 글자 수 count도 추가 가능!😮
		<Input.TextArea
            size="large"
            className="product-description"
            showCount
            maxLength={300}
          ></Input.TextArea>
  • form에서 button 설정할 때 htmlType을 꼭 설정해줘야 한다.
    여기선 이 버튼이 제출할 때 사용하는 버튼이라고 설정해주자
<Button id="submit-button" size="large" htmlType="submit">

4. css

float: 자기 부모 기준으로 우측으로 위치시킬 때 사용

좋은 웹페이지 즐겨찾기