e.target.value 在 React 中返回 Undefined 时遇到问题

Question

我有一个功能，您可以单击一个图像并查看可单击的名称列表….当您单击一个名称时，该人的图像应该代替原始图像。我正在使用艺术家 api，而不是在控制台中出现错误，图像更改为名称为“未定义”的艺术家的 img ……奇怪。可能不是一个巨大的修复，但我已经被这个问题折磨了一段时间了。

 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;

原文由 Mshark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

event.target 会给你目标 HTML 元素。 Javascript 会将 Node 的所有属性作为 event.target 的属性。

例如：

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

e.target.id //returns 'hello'

有一些特殊情况，例如 inputs 属性 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

希望这可以帮助！

原文由 Pranesh Ravi 发布，翻译遵循 CC BY-SA 3.0 许可协议