React에서 여러 개의 라디오 버튼을 사용하는 간단한 방법

많은 초보자들은 라디오 버튼이 그룹화되어 있고 하나의 그룹에서 하나의 라디오 버튼만 선택할 수 있다는 것을 인식하지 못하기 때문에 여러 개의 라디오 버튼을 사용하는 데 문제가 있습니다.

오늘은 React에서 그룹을 사용하지 않고(이름 매개변수를 사용하지 않고) 여러 개의 라디오 버튼을 쉽게 사용하는 방법을 보여드리고자 합니다. 😊

시작하기 전에 웹 사이트에서 솔루션에 대한 실행 가능한 예제를 확인하는 것이 좋습니다.
Simple way to use multiple radio buttons in React

최종 효과:

아래 예에서 단일 RadioInput (라디오 버튼)으로 label를 렌더링하는 input type="radio" 기능 구성 요소를 만들었습니다.
Form에는 4개의 RadioInput 요소가 있습니다. 2개는 성별이고 2개는 역할입니다.

모든 그룹에서 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 그런 다음 setGender 함수는 성별 🧒🧑을 설정하고 setRole 함수는 선택한 옵션에 따라 역할을 설정합니다.

실제 예:

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const RadioInput = ({label, value, checked, setter}) => {
    return (
      <label>
        <input type="radio" checked={checked == value}
               onChange={() => setter(value)} />
        <span>{label}</span>
      </label>
    );
};

const Form = props => {
    const [gender, setGender] = React.useState();
    const [role, setRole] = React.useState();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {gender, role};
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Gender:</label>
          <RadioInput label="Male" value="male" checked={gender} setter={setGender}  />
          <RadioInput label="Female" value="female" checked={gender} setter={setGender} />
        </div>
        <div>
          <label>Role:</label>
          <RadioInput label="Admin" value="admin" checked={role} setter={setRole} />
          <RadioInput label="User" value="user" checked={role} setter={setRole}  />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

이 예제를 실행할 수 있습니다here.

이 솔루션이 유용하다고 생각하고 이와 같은 더 많은 콘텐츠를 받고 싶다면 댓글이나 반응을 남겨주세요 💗🦄💾.
시간 내주셔서 감사합니다. 다음 게시물에서 뵙겠습니다! 😊🔜

우리에게 쓰기! ✉

해결해야 할 문제가 있거나 React 또는 JavaScript 주제와 관련하여 아무도 대답할 수 없는 질문이 있거나 멘토링을 찾고 있는 경우 dirask.com -> Questions에 문의하십시오.

코딩 팁과 요령을 다른 사람들과 공유하는 당사facebook group에 가입할 수도 있습니다! 🔥