如何在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作为href属性。 将鼠标悬停在图像上（不要单击它们）以在浏览器状态栏中查看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') ); 

 .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>