선택한 여러 라디오 버튼 값 및 uniqueId를 배열에 추가

Hman

라디오 옵션

여러 라디오 버튼 (그룹) 옵션을 매핑하고 사용자가 라디오 버튼을 클릭 할 때 선택한 값과 고유 ID를 배열에 추가하고 싶습니다.

현재 코드를 사용하면 현재 클릭하고 있지만 배열에 추가 할 수없는 값을 얻을 수 있습니다.

{result !== null && result.length > 0 ? (
    <div>
      {result.map(item => {
        const label = item.question
        const listOptions = item.options.map(item => {
          return (
            <Radio
              name={item.uniqueId}
              inline
              value={item.uniqueId}
              key={item.uniqueId}
              className="radio-options"
              checked={item.checked}
              onChange={e => {

                this.handleChange(label, uniqueId);
              }}
            >
              {item.options}
            </Radio>
          );
        });

        return (
          <div className="radio-options-overview">
            <p>{label}</p>
            {listOptions}
          </div>
        );
      })}
handleChange = (label, uniqueId) => {
  console.log(label, uniqueId);
  let addToArray = [];
  this.setState({ selectedItems: addToArray})
};

배열은 다음과 같습니다.

[
  { "label": "ageRange", "uniquId": 2 },
  { "label": "smoker", "uniquId": 1 },
  { "label": "exOption", "uniquId": 3 }
]
히라

거의 다 왔습니다. @Clarity는 좋은 솔루션을 제공했습니다. 기존 가치를 대체하고 새로운 가치로 바꾸고 싶다면

이 시도

handleChange = (label, uniqueId) => {
    const { selectedItems } = this.state
    // Find items that already exists in array
    const findExistingItem = selectedItems.find((item) => {
      return item.uniqueId === uniqueId;
    })

    if(findExistingItem) {
      // Remove found Item 
      selectedItems.splice(findExistingItem);
      // set the state with new values/object
      this.setState(state => ({
        selectedItems: [...state.selectedItems, {
          label, uniqueId
        }]
      }))
    } else {
      // if new Item is being added
      this.setState(state => ({
        selectedItems: [...state.selectedItems, {
          label, uniqueId
        }]
      }))
    }
};

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

라디오 버튼 / 체크 박스 / 옵션 선택-선택한 항목의 총 가격 (값) 추가 및 배열에 추가

분류에서Dev

jquery를 사용하여 Polymer 라디오 그룹에서 선택한 버튼의 값 가져 오기

분류에서Dev

Vanilla JavaScript를 사용하여 Angular 11 Form에서 선택한 라디오 버튼에서 값을 가져 오는 방법

분류에서Dev

컨트롤러에서 사용자가 선택한 라디오 버튼의 값을 어떻게 얻습니까?

분류에서Dev

Android의 배열에 선택한 라디오 버튼을 추가하는 방법

분류에서Dev

jquery로 선택한 라디오 버튼에서 텍스트 값 가져 오기

분류에서Dev

iCheck 라이브러리 : 선택한 라디오 버튼의 값

분류에서Dev

iCheck 라이브러리 : 선택한 라디오 버튼의 값

분류에서Dev

배열 Javascript에 여러 라디오 버튼 값 저장

분류에서Dev

선택한 라디오 버튼에 수업 추가

분류에서Dev

조각의 라디오 그룹에서 선택한 라디오 버튼 값 가져 오기

분류에서Dev

라디오 버튼에 대한 jQuery toggle ()은 한 번에 여러 개를 선택하며 간단한 라디오 버튼처럼 작동해야합니다.

분류에서Dev

Jquery를 사용하여 라디오 버튼 및 선택된 드롭 다운 값 확인

분류에서Dev

Google App Engine : 선택한 라디오 버튼의 값 추출

분류에서Dev

Laravel : 라디오 버튼으로 여러 값 선택

분류에서Dev

Laravel : 라디오 버튼에서 값 가져 오기 및 결합

분류에서Dev

라디오 버튼 및 라디오 그룹 android에서 값 가져 오기

분류에서Dev

배열 결과 가져 오기에서 라디오 버튼의 선택된 값을 검색하는 방법 ..?

분류에서Dev

동일한 v- 모델 이름을 가진 여러 라디오 버튼에서 라디오 버튼 값을 얻는 방법은 무엇입니까?

분류에서Dev

라디오 버튼을 사용하여 값 증가 및 감소

분류에서Dev

라디오 버튼이있는 여러 양식에서 고유 한 값 가져 오기-jQuery

분류에서Dev

버튼 클릭시 선택한 라디오 버튼 값 전달에 대한 Jquery

분류에서Dev

라디오 버튼 및 체크 박스에 동일한 이벤트 핸들러 추가

분류에서Dev

thymeleaf에서 선택한 라디오 버튼에 대한 클래스 추가

분류에서Dev

Ajax에서 생성 한 툴팁에서 선택된 라디오 버튼 값 가져 오기

분류에서Dev

자바 스크립트에서 선택한 라디오 버튼 값 가져 오기

분류에서Dev

데이터 목록에서 선택한 라디오 버튼의 값을 가져 오는 방법

분류에서Dev

옵션 선택에 대한 여러 값 설정 및 jQuery로 가져 오기

분류에서Dev

라디오 버튼 값에 따라 값에 추가

Related 관련 기사

  1. 1

    라디오 버튼 / 체크 박스 / 옵션 선택-선택한 항목의 총 가격 (값) 추가 및 배열에 추가

  2. 2

    jquery를 사용하여 Polymer 라디오 그룹에서 선택한 버튼의 값 가져 오기

  3. 3

    Vanilla JavaScript를 사용하여 Angular 11 Form에서 선택한 라디오 버튼에서 값을 가져 오는 방법

  4. 4

    컨트롤러에서 사용자가 선택한 라디오 버튼의 값을 어떻게 얻습니까?

  5. 5

    Android의 배열에 선택한 라디오 버튼을 추가하는 방법

  6. 6

    jquery로 선택한 라디오 버튼에서 텍스트 값 가져 오기

  7. 7

    iCheck 라이브러리 : 선택한 라디오 버튼의 값

  8. 8

    iCheck 라이브러리 : 선택한 라디오 버튼의 값

  9. 9

    배열 Javascript에 여러 라디오 버튼 값 저장

  10. 10

    선택한 라디오 버튼에 수업 추가

  11. 11

    조각의 라디오 그룹에서 선택한 라디오 버튼 값 가져 오기

  12. 12

    라디오 버튼에 대한 jQuery toggle ()은 한 번에 여러 개를 선택하며 간단한 라디오 버튼처럼 작동해야합니다.

  13. 13

    Jquery를 사용하여 라디오 버튼 및 선택된 드롭 다운 값 확인

  14. 14

    Google App Engine : 선택한 라디오 버튼의 값 추출

  15. 15

    Laravel : 라디오 버튼으로 여러 값 선택

  16. 16

    Laravel : 라디오 버튼에서 값 가져 오기 및 결합

  17. 17

    라디오 버튼 및 라디오 그룹 android에서 값 가져 오기

  18. 18

    배열 결과 가져 오기에서 라디오 버튼의 선택된 값을 검색하는 방법 ..?

  19. 19

    동일한 v- 모델 이름을 가진 여러 라디오 버튼에서 라디오 버튼 값을 얻는 방법은 무엇입니까?

  20. 20

    라디오 버튼을 사용하여 값 증가 및 감소

  21. 21

    라디오 버튼이있는 여러 양식에서 고유 한 값 가져 오기-jQuery

  22. 22

    버튼 클릭시 선택한 라디오 버튼 값 전달에 대한 Jquery

  23. 23

    라디오 버튼 및 체크 박스에 동일한 이벤트 핸들러 추가

  24. 24

    thymeleaf에서 선택한 라디오 버튼에 대한 클래스 추가

  25. 25

    Ajax에서 생성 한 툴팁에서 선택된 라디오 버튼 값 가져 오기

  26. 26

    자바 스크립트에서 선택한 라디오 버튼 값 가져 오기

  27. 27

    데이터 목록에서 선택한 라디오 버튼의 값을 가져 오는 방법

  28. 28

    옵션 선택에 대한 여러 값 설정 및 jQuery로 가져 오기

  29. 29

    라디오 버튼 값에 따라 값에 추가

뜨겁다태그

보관