e.target.value 문제가 발생하여 응답에서 정의되지 않음

Question

나는 img를 클릭하고 클릭 할 수있는 이름 목록을 볼 수있는 기능이 있습니다. 이름을 클릭하면 그 사람 이미지가 취해야하는 클릭 할 수있는 기능이 있습니다. 원본 img의 장소. Im은 아티스트 api로 작업하고 콘솔에서 오류가 발생하는 대신 이미지 이름이 '정의되지 않은'아티스트의 img로 변경됩니다. 이상합니다. 엄청난 문제는 아니지만 지금 당분간은이 문제로 괴로워하고 있습니다.

이

const Artist = ({name, artistOnClick}) => { 
    return (
    <div name={name} onClick={artistOnClick}> 
     {name} 
    </div> 
) 
} 

export default Artist; 

Answer 1

div 요소는 value 속성이없는, 그래서 아무것도 특정 클릭에 대한 이벤트 객체의 뒷면에 통과 할 수 없습니다 :

searchForArtist(query) { 
    request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`) 
     .then((response) => { 
     const artist = response.body.artists.items[0]; 
     const name = artist.name; 
     const id = artist.id; 
     const img_url = artist.images[0].url; 
     this.setState({ 
      selectedArtist: { 
      name, 
      id, 
      img_url, 
      }, 
     }); 
     }) 
     .then(() => { 
     this.getArtistAlbums(); 
     }) 
     .catch((err) => { 
     console.error(err); 
     }); 
    } 

    getSubsequentCollabs(artist) { 
    this.setState({ 
     selectedArtist: {}, 
     selectedAlbums: {}, 
     artistCounts: {}, 
    }); 
    console.log(artist); 
    this.searchForArtist(artist); 
    } 

    artistOnClick(e) { 
    console.log(e); 
    let artist = e.target.value; 
    this.getSubsequentCollabs(artist); 
    } 

나는 또 다른 구성 요소가이 일을 가지고 행사.

이 일어날 기대에 따라 같은 일을하여 해결할 수 :

const Artist = ({name, artistOnClick}) => { 
    return (
    <div onClick={() => artistOnClick(name)}> 
     {name} 
    </div> 
) 
} 

export default Artist; 

Answer 2

event.target는 당신에게 대상 HTML 요소를 제공 할 것입니다. Javascript는 노드의 모든 속성을 event.target의 속성으로 만듭니다. 예를 들어

:

inputs 같은 특별한 경우가 있습니다

<div id="hello">Hello</div> 

e.target.id //returns 'hello' 

곳 암시에서 속성 value. 그러나 다른 HTML 요소의 경우 특성을 명시 적으로 지정해야합니다.

그래서, 당신은 HTML이 도움이

const Artist = ({name, artistOnClick}) => { 
    return (
    <div value={name} onClick={artistOnClick}> 
     {name} 
    </div> 
) 
} 

e.target.value //return the name 

또는

const Artist = ({name, artistOnClick}) => { 
    return (
    <div onClick={() => artistOnClick(name)}> 
     {name} 
    </div> 
) 
} 

e.target.name //returns the name 

희망처럼해야합니다!