J'ai donc un élément DIV qui, lorsqu'il est enfoncé, je veux ouvrir un nouvel onglet dans une fenêtre différente. Le seul problème est que chaque fois que la page est actualisée ou que tout autre élément div est enfoncé, la fonction est également lancée et ouvre une page dans une autre fenêtre. J'inclurai mon code ci-dessous, mais je ne sais pas pourquoi cela se produit vu comment j'utilise onClick={window.open("https://www.thechinesewriter.com") Comme je l'ai dit, je veux seulement qu'un nouvel onglet s'ouvre lorsque le div est enfoncé, pas quand tous les autres éléments de la page sont cliqués ou même lorsque la page elle-même est actualisée.

import React from "react";
import "./Column1.css";

class Column1 extends React.Component {

    render() {
        return(
            <React.Fragment>
                 <div className="rectImage">
                     <img className="imagePost" src={this.props.image} />   
                 </div>
                 <div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
                     <h2>
                         Source
                     </h2>
                 </div>
                 <div className="downloadBut2">
                     <h2>
                         Repository
                     </h2>
                 </div>
             </React.Fragment> 
         )
     }     
}

export default Column1;
2
John Harrison 15 mars 2019 à 21:11

2 réponses

Meilleure réponse

Vous devez appeler la fonction comme un rappel comme celui-ci.

<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">

Sinon, cela est appelé à chaque fois que le composant est rendu.

5
Mark 15 mars 2019 à 18:15

Vous utilisez une expression qui s'exécutera à chaque rendu du composant.

<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">

Vous voulez probablement utiliser une fonction

<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">
2
Patrick Hollweck 15 mars 2019 à 18:14