🟡

정보 입력 템플릿 form 밖에 버튼

기술

HTML

상태

In progress

작업

정보_입력_템플릿

고민됐던 거

반복되는 부분은 버튼을 제외한 인풋창 부분

이 부분만 form으로 하고 버튼을 form밖에 빼는 방법이 있을까?

내 해결 방법

form에 아이디를 줌(버튼과 form이 같은 아이디)

Submit form using a button outside the tag

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/7020659/submit-form-using-a-button-outside-the-form-tag

import React from "react"; import ProfileImageSet from "../shared/ProfileImageSet/ProfileImageSet"; import InfoInput from "../shared/InfoInput/InfoInput"; import Warning from "../shared/Warning/Warning"; import "./profileSetInpsTemp.css" import { useState } from "react"; export default function ProfileSetInpsTemp({ formId }) { const [visible1, setVisibility1] = useState(false); const [visible2, setVisibility2] = useState(false); const handleOnBlurFunc1 = (e) => { e.target.style.backgroundColor="initial"; if (e.target.validity.patternMismatch) { setVisibility1(true); } else { setVisibility1(false); } } const handleOnBlurFunc2 = (e) => { e.target.style.backgroundColor="initial"; if (e.target.validity.patternMismatch) { setVisibility2(true); } else { setVisibility2(false); } } return ( <form id={formId}> <ProfileImageSet /> <InfoInput type={"text"} label={"사용자 이름"} placeHolder={"2~10자 이내여야 합니다."} minlength={"2"} maxlength={"10"} pattern={"[a-zA-Zㄱ-힣 ]{2,10}"} required={true} onBlur={handleOnBlurFunc1} /> <Warning message={"경고"} visible={visible1} /> <InfoInput type={"text"} label={"계정 ID"} placeHolder={"영문, 숫자, 특수문자(.),(_)만 사용 가능합니다."} pattern={"[a-zA-Z0-9._]+"} required={true} onBlur={handleOnBlurFunc2} /> <Warning message={"영문, 숫자, 밑줄 및 마침표만 사용할 수 있습니다."} visible={visible2} /> <InfoInput type={"text"} label={"소개"} placeHolder={"자신과 판매할 상품에 대해 소개해 주세요!"} onBlur={e => e.target.style.backgroundColor="initial"} /> </form> ) }