inflearn logo
강의

講義

知識共有

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

11-01-event-bubbling

MouseEvent 형식이 제네릭이 아닙니다.

解決済みの質問

1361

rlaandus21535

投稿した質問数 12

0

    const onClickSpan = (event: MouseEvent<HTMLSpanElement>) => {
        alert(event.currentTarget.id + "번 게시물입니다.")
        console.log(event.currentTarget.id)
    }

    const onClickDiv = (event: MouseEvent<HTMLDivElement>) => {
        alert(event.currentTarget.id + "번 게시물입니다.")
        console.log(event.currentTarget.id)
    }

    const qqq = (event: MouseEvent<HTMLSpanElement>) => {
        alert("클릭 타이틀")
    }

// map의 특이점 또는 callback함수의 특이점 : 중괄호{} 로 쓰면return 생략 불가능 , () 로 쓰면 return 생략 가능
    return(
        <>
        <div>
            {data?.fetchBoards.map((el: any) => ( // 함수타입은 인자 받는 곳에서 타입을 선언해주면됨
                <div>
                    <span>
                      <input type='checkbox' />
                    </span>
                    <span onClick = {() => ( // 안에서 바로 지정해버리는 법
                        alert(el.number + "번 게시물입니다. 안에서 지정 법")
                    )} style = {mystyle}>{el.number}</span> 
                    <span id = {el.number} onClick = {onClickSpan} style = {mystyle}>{el.writer}</span> 
                    <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.title}</span> 
                    <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.contents}</span>
                </div>))}
        </div>
        <div>
            {data?.fetchBoards.map((el: any) => ( // 위에서 처럼 하나하나 지정 말고 한번에 지정하는 법 (이벤트 버블링으로 클릭 이벤트 전파)
                <div id={el.number} onClick={onClickDiv}>
                    <span>
                      <input type='checkbox' />
                    </span>
                    <span onClick = {qqq} style = {mystyle}>{el.number}</span> 
                    <span style = {mystyle}>{el.writer}</span> 
                    <span style = {{margin: "10px"}}>{el.title}</span> 
                    <span style = {{margin: "10px"}}>{el.contents}</span>
                </div>))}
        </div>

위 코드에서 span 태그에는 HTMLSpanElement Div 태그에는 HTMLDivElement 를 적용했는데 'MouseEvent 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!

react node.js seo graphql next.js

回答 1

2

rlaandus21535

아 해결됬습니다! MouseEvent를 import해주는걸 깜빡했습니다!

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

36

1

댓글 기능 구현 중 질문드립니다.

0

66

1

쿠폰코드 발급

0

128

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

86

2

문의드립니다!! ㅠㅠ

0

101

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

76

2

_app.js 작성 이후로 에러가 발생하네요

0

93

2

학습자료

0

70

2

학습자료가 안열립니다.

0

48

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

59

0

기존강의 구매자, 업데이트 끝인가요?

0

108

3

업데이트 버전 수강

0

88

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

81

1

graphql 접속이 안됩니다.

0

100

2

const, let 사용 질문 드립니다.

0

70

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

122

2

회원가입 과제 피드백 부탁드립니다.

0

79

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

166

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

183

2

2분 44초 질문

0

131

3