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;

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 

希望这会有所帮助！

Answer 2

div 元素没有 value 属性，因此对于特定的点击事件，在事件对象的背面没有任何内容可以传递。

根据您的预期，您可以通过以下方式解决它：

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

export default Artist;

Answer 3

在 React 中，如果 e.target.value 没有保存在另一个变量中，它将显示为 null。 例如：

const onChange = e => {
    console.log(e.target.value);
    setState(
        blah: e.target.value
    )
}

在上面的示例中，console.log(e.target.value) 将作为值出现，但在 setState 中，e.target.value 将是未定义的。

您需要将 e.target.value 保存在一个新变量中，以便能够使用它。：

const eTarget = e.target.value;

React 使用事件池。 Read about it here:

来自文档：

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

Answer 4

我遇到了类似的问题，我的输入字段返回未定义的 e.target.value

我解决了

onChange={this.mymethod.bind(this)}

我希望它会帮助其他人。