e.target.valueで問題が発生しました返信で未定義

Question

私はimgをクリックしてクリック可能な名前のリストを見ることができます。名前をクリックすると、元のimgの場所。私はアーティストのAPIを使って作業していますが、コンソールにエラーが表示された場合、イメージはアーティストの名前が「不定」に変わります。巨大な修正ではないかもしれませんが、今はこの問題で苦しんでいます。

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 name={name} onClick={artistOnClick}> 
     {name} 
    </div> 
) 
} 

export default Artist; 

Answer 1

div要素は、value属性を持っていない、ので、何もその特定のクリックのイベントオブジェクトの背面に通過することはできないがイベント。あなたが起こることを期待内容に応じて、あなたのような何かをすることによって、それに取り組むことができ

：

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

export default Artist; 

Answer 2

event.targetは、あなたのターゲットHTML要素を提供します。 Javascriptは、ノードのすべての属性をプロパティevent.targetとして作成します。例については

：

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

e.target.id //returns 'hello' 

暗黙の内のプロパティは、valueinputsのような特殊なケースがあります。しかし、他のHTML要素では、属性を明示的に指定する必要があります。

だから、あなたはHTMLはこのことができます。この

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

e.target.value //return the name 

OR

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

e.target.name //returns the name 

希望のようにする必要があります！