양식 요소 및 시맨틱 UI 사용 React: 값 추출

안녕하세요!
저는 제 과정 중 하나에서 React 프로젝트를 진행하고 있었습니다. 그 안에서 저는 양식을 만들어야 했고 제 프로젝트에 Semantic UI React를 사용하기로 결정했습니다.

내 양식의 값에서 정보를 추출하는 방법을 파악하는 데 꽤 많은 시도가 필요했습니다. 특히 라디오 버튼과 드롭다운을 사용하는 일부 양식 입력은 Semantic UI를 사용하여 중첩되었습니다. 이러한 중첩된 요소가 있으면 e.target.value 또는 e.target.checked와 같은 정보를 추출하는 기존 방법은 작동하지 않습니다. 다음은 console.log(e.target)의 모습입니다.


값을 추출할 수 있는 라디오 버튼이 아니라 레이블을 기록하는 것을 볼 수 있습니다.

운 좋게도 Semantic UI React가 실제로 이벤트 객체와 함께 데이터 객체를 전달한다고 설명하는 Lauren Gifford의 article을 찾았습니다... 그래서 하늘이 열렸습니다!



Semantic UI React 라디오 버튼 또는 드롭다운에서 정보를 추출하기 위해 함수에 data 매개변수를 포함할 수 있습니다. console.log(data)를 실행하면 다음과 같이 표시됩니다.



여기에서 값을 포함하여 전달된 모든 키를 볼 수 있습니다! 이제 data.value 를 사용하여 드롭다운 및 라디오 버튼의 값에 액세스할 수 있습니다. 다음은 이벤트와 데이터를 매개변수로 사용하는 함수의 예입니다.

 function handleChange(e, data) {
    if (data.name === 'typeGroup') {
      setType(data.value)
    } else if (data.name === 'accountGroup') {
      setAccount(data.value)
    } else if (e.target.name === 'notes') {
      setNotes(e.target.value)
    } else if (data.name === 'category') {
      setCategory(data.value)
    }
  }

이게 도움이 되길 바란다! 즐거운 코딩하세요!