React 및 Type Script로 수행

개시하다

React,React Hooks,TypeScript개인 설치<input type=radio>하기 어려워서 기록으로 남겨두세요!

<input type="radio"와 완결편?

여러 가지 선택 중에서 사용자는 하나의 탭만 선택할 수 있는 것 같습니다.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio

당장 실현해 보자

name,IDL属性의checked와value, 그리고 변경과 상태를 유지하기 위해 정의state와onChange의 유형.

interface TagRadioProps {
    name: string;
    value: Array<string>;
    state: React.SetStateAction<string>;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

그룹 내의 선택한 state가 일치하면 수여checked(그렇지 않으면 모두 수여checked

const TagRadioContainer: React.FC<TagRadioProps> = (props) => {
    const { name, value, state, onChange } = props;
    return (
        <>
            {value.map((item, index) => (
                <label key={index}>
                    <input type="radio" name={name} value={item} checked={item === state} onChange={onChange} />
                    {item}
                </label>
            ))}
        </>
    );
};

Form에 추가됩니다.그나저나 <button>タグsubmit에 걸린 이유는 buttontype 属性의 초기치type="submit"였다.

<form onSubmit={handleSubmit}>
    <p>
        <TimerRadioContainer name={name} state={state} value={value} onChange={onChange} />
    </p>
    <button >Submit</button>
</form>

끝말

React 및 Type Script로 구현된 것은 이번이 처음입니다.아직 익숙하지 않지만 끊임없이 실수와 진보를 겪고 싶습니다.
만약 참고할 수 있다면 대단히 영광스럽습니다.이보다 더 좋은 설치 방법이 있다면 지적해 주세요.