如何在reactjs中使用document.getElementById使图像可点击

Question

我当前正在使用Twitch API，在这里我创建了一个通过搜索来呈现游戏封面图像的文件。我希望用户能够单击游戏图像，这将使他们重定向到正确的Twitch链接

搜索响应

我用于游戏图像渲染的代码如下：

render() {
const { game } = this.props

return (
  <div className="GameDetails">
      <img src={this.formatImageUrl(game.box_art_url)} alt="" />
      <p>{game.name} </p>
      <p>ID: {game.id}</p>
  </div>
   )
  }
 }

export default GameImage

我尝试了：

render() {
  const { game } = this.props

return (
  <div className="GameDetails">
      <img src={this.formatImageUrl(game.box_art_url)} alt="" onClick${"https://www.twitch.tv/directory/game/${document.getElementById("SearchName").value}"}/>
      <p>{game.name} </p>
      <p>ID: {game.id}</p>
 </div>
   )
  }
 }

 export default GameImage

这给我一个错误。 用户在游戏的搜索栏中输入的是“ SearchName”值，因此，我希望在单击时将其发送到相应的抽搐页面。

Answer 1

当然，您会收到一条错误消息，因为首先您将$与=拼写错误，其次，onClick prop期望有一个函数可以在单击图像后处理操作。

建议的方法：

handleClick = () => {
   // logic when user clicks on image
   // https://www.twitch.tv/directory/game/${document.getElementById("SearchName").value}
}

render() {
  const { game } = this.props

  return (
    <div className="GameDetails">
      <img src={this.formatImageUrl(game.box_art_url)} alt="" onClick={this.handleClick} />
      <p>{game.name} </p>
      <p>ID: {game.id}</p>
    </div>
  )
}

export default GameImage

编辑：很难理解您真正想要实现的目标，但是，如果您希望将img用作链接，则应考虑使用a元素代替。只需将img标签和p包装到a中即可。

render() {
  const { game} = this.props
  const link = `https://www.twitch.tv/directory/game/${document.getElementById("SearchName").value}`;

  return (
    <div className="GameDetails">
      <a href={link}>
        <img src={this.formatImageUrl(game.box_art_url)} alt="" onClick={this.handleClick} />
        <p>{game.name} </p>
        <p>ID: {game.id}</p>
      </a>
    </div>
  )
}

Answer 2

如果您只想通过单击图像转到另一个站点，只需将其包装在HTML锚点中，并将URL作为function App({ data }) { return data.map(game => <Details game={game} />); } function Details({ game }) { return ( <div className="gameDetails"> <a href={game.twitch_url}> <img src={game.box_art_url} /> </a> </div> ); } const data = [ { id: 1, twitch_url: 'http://game1.com', box_art_url: 'https://dummyimage.com/100x100/000/fff' }, { id: 2, twitch_url: 'http://game2.com', box_art_url: 'https://dummyimage.com/100x100/555/fff' }, ]; ReactDOM.render( <App data={data} />, document.getElementById('container') );属性即可。将鼠标悬停在图像上（不要单击它们）以在浏览器状态栏中查看URL。

.gameDetails {
  display: inline-block;
  padding: 0.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

@EnableCassandraRepositories