Как сделать изображение кликабельным, используя 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

Если все, что вам нужно, это перейти на другой сайт, нажав на изображение, просто оберните его в 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>

Answer 2

Конечно, вы получите ошибку, потому что, во-первых, вы ошиблись $ с =, а во-вторых, 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>
  )
}