작업 중에 위와 같이 타입 에러가 발생됩니다. 확인 부탁드립니다 

안녕하세요 그레이프시티입니다.

먼저 샘플 이용에 있어 불편을 드려 죄송합니다.

아래에 함수형 컴포넌트로 변환한 팝업 편집기 데모 샘플의 다운로드 링크를 전달해 드리오니 다운로드하여 사용해 보시기 바랍니다.

- 샘플 다운로드 링크

다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림

안녕하세요 팝업 편집기 적용하던 중에 타입에러가 발생됩니다.

어떻게 해야하나요??

안녕하세요 그레이프시티입니다.

문의 주신 이슈와 관련하여 17 버전 버전의 React 프레임워크를 사용하고 계신 것이 맞으실까요?

만약 맞으시다면, 해당 이슈는 React 프레임워크의 버전 차이로 인해 발생한 에러로 보입니다. 전달 해드린 샘플의 React 프레임워크 버전은 16 버전으로, 17 버전에서 샘플 이용 시 전달해 주신 이슈와 같은 에러가 발생할 수 있습니다.

React 프레임워크가 16 버전에서 17 버전으로 업그레이드 되면서, DOM 요소에 이벤트를 위임하는 React Hooks 작동의 변경되었습니다. 이로 인해 17 버전의 React 에서 샘플 이용 시, useRef  변수가 업데이트 되기 전에 호출된 useEffect 메서드를 통해 초기의 useRef 변수의 값이 null 로 지정되어 해당 에러가 발생한 것으로 보입니다.

이와 관련된 React 공식 문서를 공유 드리오니 참고해 보시기 바랍니다.

- React 17 버전 공식 문서

17 버전의 React 프레임워크에서 샘플 이용 시 발생하는 에러를 해결하기 위하여, 아래의 코드와 같이 setTimeout 메서드를 통해 useRef 변수가 업데이트 된 후 useEffect 메서드 내에서 해당 변수의 값을 지정하는 코드를 작성해 보시기 바랍니다. 

 // 팝업 컨트롤 인스턴스 지정
 React.useEffect(() => {
    setTimeout(() => {
      frmpopup.current = popupRef.current.control;
    })
  }, [frmpopup]);
 // 팝업 내부의 Input 컨트롤 요소의 인스턴스 지정
  React.useEffect(() => {
      setTimeout(() => {
        frmcboCountry.current = cboCountryRef.current.control;
      })
  }, [frmcboCountry]);
  React.useEffect(() => {
      setTimeout(() => {
        frmnumberSales.current = numberSalesRef.current.control;
      })
  }, [frmnumberSales]);
  React.useEffect(() => {
      setTimeout(() => {
        frmnumberExpenses.current = numberExpensesRef.current.control;
      })
  }, [frmnumberExpenses]);

다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림

답변 감사합니다

다른 문의사항은 팝업을 오픈할 때 왼쪽의 펜 모양을 누르지 않고 아래의 PROD_CODE를 클릭 했을 때 팝업을 띄우는 방법은 어떻게 하나요?

안녕하세요 그레이프시티입니다.

문의 주신 내용에 대해 답변 드립니다.

특정 열 내부의 셀 클릭 시 팝업을 표시하려 하신다면, 아래의 코드와 같이 그리드의 hitTest 메서드를 이용하여 그리드에서 선택된 영역의 cellType 속성이 'cell' 인 경우 해당 영역이 특정 열에 속할 때 팝업을 표시하는 코드를 작성하시면 됩니다.

flex.addEventListener(flex.hostElement, "click", (e) => {
  let ht = flex.hitTest(e);
  // 선택된 영역이 셀일때
  if (ht.panel.cellType === 1) {
     ...
    // 선택된 영역이 첫 번째 열 내부의 셀일 때
    if (ht.col == 0) {
      frmPopup.current.show(true,(s)=>{...}); // 팝업 표시
      flex.focus();
    }
  }
});

- hitTest API 문서

- cellType API 문서

- col API 문서

API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림