J'ai ce tableau:

<Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                {this.state.fichierJointsInformation.map(
                  (operationSavInformation, i) => {
                    return (
                      <tr key={i}>
                        <td>
                          <Link
                            to={""}
                            onClick={this.onFichierJointLinkClicked}
                          >
                            {operationSavInformation.nomFichierOriginal}
                          </Link>
                        </td>
                        <td>{operationSavInformation.createdAt}</td>
                      </tr>
                    );
                  }
                )}
              </tbody>
            </Table>

Il est rendu comme ceci:
entrez la description de l'image ici

Ce que j'essaie de mettre en œuvre: lorsque l'utilisateur clique sur un élément de la première colonne, le fichier associé est téléchargé.
Ainsi, l'écouteur onFichierJointLinkClicked onClick, prendra en charge la demande d'API et tout le reste.

<Link
                        to={""}
                        onClick={this.onFichierJointLinkClicked}
                      >
                        {operationSavInformation.nomFichierOriginal}
                      </Link>

MON PROBLÈME: Le support to dans LINK est requis. Cependant, je ne veux pas diriger l'utilisateur vers une autre page. Je veux juste que le onFichierJointLinkClicked soit déclenché.

Si je supprime l'accessoire to, j'obtiens évidemment cette erreur:

index.js:1 Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.
0
Ahmed Ghrib 8 avril 2020 à 12:24

3 réponses

Meilleure réponse

Essayez de mettre # c'est-à-dire to="#", comme je le fais. Et ça fonctionne bien pour moi -

S'il te plait regarde -

<div className="pagination alternate pull-right">
  <ul>
    <li className={props.prevPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.prevPage, props.noOfPages)}
      >
        Prev
      </NavLink>
    </li>
    {links}
    <li className={props.nextPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.nextPage, props.noOfPages)}
      >
        Next
      </NavLink>
    </li>
  </ul>
</div>
1
Alok Mali 8 avril 2020 à 09:44

Remplacez simplement votre lien par un div personnalisé, puis stylisez-le avec un peu de CSS (curseur: pointeur, couleur,: survol: ...)

Ensuite, dans votre onFichierJointLinkClicked, ouvrez votre pdf dans une autre fenêtre comme celle-ci:

window.open(path, '_blank');
0
HermitCrab 8 avril 2020 à 09:31

Il semble que vous n'ayez plus besoin d'un lien, définissez un style pour que votre élément td se comporte comme un lien et attachez l'écouteur d'événement onClick

J'ai essayé de reproduire un peu votre besoin ici

App.js

import React from "react";
import { Table } from 'react-bootstrap';
import "./styles.css";



export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                    <td className="likeALink" onClick={() => console.log("your custom function")}>
                        something
                    </td>
                    <td>something else</td>
                  </tr>
              </tbody>
            </Table>
      
    </div>
  );
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.likeALink:hover {
  text-decoration: underline;
}

.likeALink {
  color: blue
}
<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>
1
David Kayembe 8 avril 2020 à 09:50