반응: 라디오 버튼 컬렉션에 선택한 항목이 있는지 확인하는 방법

반응: 라디오 버튼 컬렉션에 선택한 항목이 있는지 확인하는 방법

다음 순서가 지정되지 않은 HTML/JSX 목록:

<ul className="settings">
  <li>
    <input type="radio" name="settings" id="beginner" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="beginner">Beginner</label>
  </li>
  <li>
    <input type="radio" name="settings" id="intermediate" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="intermediate">Intermediate</label>
  </li>
  <li>
    <input type="radio" name="settings" id="expert" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="expert">Expert</label>
  </li>
  <li>
    <input type="radio" name="settings" id="custom" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="custom">Custom</label>
  </li>
</ul>

다음 기능을 실행하는 제출 버튼:

const onSubmit = (e: MouseEvent): void => {
  console.log(selectedSetting.current)
}

이 라디오 버튼 중 적어도 하나가 선택되었는지 확인하고 싶다.보다시피 나는 싱글을 사용하고 있었다.useRef여기에 변수: "사용자 지정" 라디오 버튼이 매번 기록될 수 있음.그렇다면, 직선적인 해결책은 각 라디오 버튼에 대해 useRef를 갖는 것인데, 이것을 하는 더 쉬운 방법이 있는가?내가 대신 그것을 줄 수 있을까?ula에 꼬리표를 달다refjQuery와 비슷한 일을 해서 그들 중 한 명이 선택되었는지 알아보려고?

당신은 그 일을 처리할 수 있다.onClick현재 선택된 라디오의 상태를 설정하기 위한 라디오 버튼의 이벤트

이와 비슷한 것:

const { useRef, useState } = React;
const { render } = ReactDOM;

function App() {
    const [selected, setSelected] = useState();
    const selectedSetting = useRef();
  
    const handleSettingsChange = e => setSelected(e.target.id);
  
    const handleSubmit = () => {
      selected 
        ? alert("Selected radio: " + selected) 
        : alert("Nothing Selected!");
    }
    
    return(
      <div>
        <ul className="settings">
          <li>
            <input type="radio" name="settings" id="beginner" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="beginner">Beginner</label>
          </li>
          <li>
            <input type="radio" name="settings" id="intermediate" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="intermediate">Intermediate</label>
          </li>
          <li>
            <input type="radio" name="settings" id="expert" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="expert">Expert</label>
          </li>
          <li>
            <input type="radio" name="settings" id="custom" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="custom">Custom</label>
          </li>
        </ul>
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>
    );
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

---

업데이트된 답변:

이렇게 하는 것이 훨씬 더 깨끗하고 "현실"적인 방법이 될 것이다...

const { useState } = React;
const { render } = ReactDOM;

const MY_RADIOS = ["Beginner", "Intermediate", "Expert", "Custom"];

function App({radios}) {
    const [selected, setSelected] = useState();
  
    const handleClick = radio => event => setSelected(radio);
  
    const handleSubmit = () => {
      let msg = selected 
        ? "Selected radio: " + selected
        : "Nothing Selected!";
      alert(msg);
    }
    
    return(
      <div>
        <ul className="settings">
          {radios && radios.map(r => {
            return (
              <li>
                <label>
                  <input onClick={handleClick(r)} type="radio" name="settings" />
                  {r}
                </label>
              </li>
            )
          })}
        </ul>
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>
    );
}

render(<App radios={MY_RADIOS} />, document.body);

li {
  list-style-type: none;  
}

ul {
  padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

참조URL: https://stackoverflow.com/questions/58310974/react-how-to-determine-if-a-collection-of-radio-buttons-have-a-selected-item