reactjs - 在 React 中 e.target.value 返回未定义的问题

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;

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 

希望这有帮助!