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

【问题标题】：How to make a image clickable using document.getElementById in reactjs如何在 reactjs 中使用 document.getElementById 使图像可点击
【发布时间】：2019-04-30 21:35:10
【问题描述】：

我目前正在使用 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”值是用户在游戏搜索栏中输入的值，因此我想在点击时将它们发送到可敬的抽搐页面。

【问题讨论】：

标签： javascript html reactjs api onclick

【解决方案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>
  )
}

【讨论】：

【解决方案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>

【讨论】：