# 211220 TIL ([React, tsx] 체크박스 클릭 시 함수 실행)

장기현장실습

SNU 성문분석 이슈

#50 N:N 분석(시각화) 기능 추가 이슈 진행중 

• (x,y) 그래프 그릴 때 참고 데이터 같이보기 옵션 추가 
  • 아무 분석도 하지 않았을 경우에는 checkbox 보이지 않도록 구현

    <Card.Body> 
      { analyzingResult ? (<> 
        <Checkbox 
        handleChange={handleChangeCheckBox} 
        isChecked={isRef} 
        label="참고(Ref) 데이터 같이보기" 
        /> 
        <img src={img} height="100%" width="100%"/> 
      	</> 
        ) : ( <p className="text-muted">분석 결과가 없습니다.</p> ) } 
    </Card.Body>

  • 처음 분석하기를 누르고 나온 그래프에는 참고 데이터 없는 그래프가 나오도록 isRef값을 false로 고정

    dispatch(showScatterGraph(selectedVoices1.map(v => v.id), selectedVoices2.map(v => v.id), false));

  • checkbox를 클릭했을 때 e.target.checked 값을 받아와서 그래프 그리는 함수 매개변수(isRef)에 넣어줌

    const handleChangeCheckBox = (e: React.ChangeEvent<HTMLInputElement>) => { 
      setIsRef(e.target.checked); 
      dispatch(showScatterGraph(voice1.map(v => v.id), voice2.map(v => v.id), e.target.checked)); 
    };

 

ㅇㅇㅇㅇㅇㅇㅇ

checkbox 해제 시

 

checkbox 선택 시