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

Question

I am currently using the Twitch API, where I have created a file that renders the game cover image by searching. I want the user to be able to click the game image, which will redirect them to their proper Twitch Links

Search Response

My code for the game image rendering looks like this:

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

I tried out:

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

Which gives me an error. The "SearchName" value is what the user types in the search bar for the game, therefore I want to send them to the respectable twitch pages when clicked.

Answer 1

Of course you will receive an error, because firstly you've misspelled $ with = and secondly, onClick prop expects a function which will handle the action after clicking the image.

Suggested approach:

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

Edit : It's kinda difficult to understand what you really want to achieve, however if you want that img to work as a link, you should consider using a element instead. Just wrap your img tag as well as p into 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

If all you want to do is go to another site by clicking on the image simply wrap it in an HTML anchor with the url as the href attribute. Hover over the images (don't click on them) to see the URL in the browser status bar.

 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>