1
votes

Réagir en exécutant une fonction à l'intérieur d'un clic sur un bouton à l'intérieur du composant parent

J'ai deux composants, un enfant et un parent, donc l'enfant est un div avec un bouton à l'intérieur et à l'intérieur du parent je l'appelle avec la propriété onclick avec une fonction à l'intérieur, est-ce possible?

Button.js p>

import React from "react";
import ReactDOM from "react-dom";
import Button from "./button";
import "./styles.css";

const  handleClick = () => {
  return(<h1>Hello world..!</h1>)

}

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick()} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

App.js

import React from "react";

const Button =() => {
  return(
    <div>
      <button> >Hello world</button>
    </div>
  )
}
export default Button;

reactjs button

1 commentaires

Oui, il est possible de faire ce que vous faites, mais cela ne donnera aucun résultat.

3 Réponses :

0
votes

L'accessoire onClick que vous avez défini sur le composant n'atteindra jamais l'élément . Vous devez ajouter le prop onClick aux accessoires des composants Button:

import React from "react";
import PropTypes from 'prop-types';

const Button = ({ onClick }) => {
  return(
    <div>
      <button onClick={onClick}>Hello world</button>
    </div>
  )
}

Button.defaultProps = {
  onClick: () => null,
};
Button.propTypes = {
  onClick: PropTypes.func,
};
export default Button;

Notez également que dans le composant parent, vous devez passer la fonction sans les parenthèses dans ce cas . Gardez à l'esprit qu'il existe différentes façons de procéder pour différents cas d'utilisation.

2 commentaires

Alors, comment sera-t-il possible de réutiliser le même bouton si une spécification de l'accessoire doit provenir d'App.js je veux utiliser mon composant bouton dans plusieurs pages et à différentes fonctions, comment puis-je faire quelque chose comme ça?

J'ai mis à jour la réponse pour utiliser les types d'accessoires et ajouté un accessoire par défaut pour onClick. De cette façon, vous pouvez utiliser ce composant avec ou sans la prop onClick . Docs ici - reactjs.org/docs/typechecking-with-proptypes.html

0
votes

L'erreur est que handleClick () est un gestionnaire de fonctions, donc ne retournez pas de modèle JSX dedans,
ceci est un exemple fonctionnel

<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="root" />

   // Button.js

    // import React from "react";

    const Button = props => (
        <div>
          <button onClick={props.click}>Hello world</button>
        </div>
      )
    // export default Button;

    // App.js

    // import React from "react";
    // import ReactDOM from "react-dom";
    // import Button from "./button";
    // import "./styles.css";

    const  handleClick = () => {
      alert("Hello world")
      // return(<h1>Hello world..!</h1>)
    }

    function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <Button click={() => handleClick()} />
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

1 commentaires

merci d'avoir rejoué mon point est de savoir comment puis-je utiliser le même bouton pour plusieurs composants et passer différentes fonctions onClick si je ne passe ou ne gère qu'un seul clic

3
votes

Créons un bon composant bouton pour utiliser le composant bouton dans plusieurs pages. Créez votre propre fichier pour le composant bouton avec le code suivant:

<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">
    <!-- This element's contents will be replaced with your component. -->
</div>

Le composant bouton a deux accessoires. Il s'agit de onClick et de title . onClick - c'est une fonction. title - c'est une chaîne. Nous pouvons utiliser PropTypes pour vérifier les types, mais pas pour le moment, dans cet exemple, c'est pas très important.

Donc, si vous voulez utiliser le composant bouton dans plusieurs pages, importez simplement votre composant bouton et passez deux accessoires au composant comme le code suivant:

const Button = ({ onClick, title }) => (
  <div>
    <button onClick={onClick}>{title}</button>
  </div>
)

const handleClick = () => {
  console.log('clicked');
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick} title=">Hello world" />
    </div>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);

0 commentaires