[React] form 내부 데이터 받기

참고자료

https://www.daleseo.com/react-radio-buttons/#google_vignette

React에서 라디오 버튼 사용하기

 

예시코드

function Radio({ children, value, name, defaultChecked, disabled }) {
    return (
        <label>
            <input
                type="radio"
                value={value}
                name={name}
                defaultChecked={defaultChecked}
                disabled={disabled}
            />
            {children}
        </label>
    );
};

const GenderSubmitButton = styled.input`
`;

function Gender() {
    const [selection, setSelection] = useState();
    return (
        <>
        <div>{selection}</div>
        
        <form onSubmit={(e) => {
        e.preventDefault();
        setSelection(e.target.contact.value);
      }}>
            <Radio name="contact" value="직접 지정" defaultChecked>
                직접 지정
            </Radio>
            <Radio name="contact" value="여성">
                여성
            </Radio>
            <Radio name="contact" value="남성">
                남성
            </Radio>
            <Radio name="contact" value="밝히고 싶지 않음" >
                밝히고 싶지 않음
            </Radio>
            <GenderSubmitButton type='submit' value='제출하기'></GenderSubmitButton>
            </form>

        </>
        );
};