web-dev-qa-db-fra.com

ReactJS - Impossible de lire la propriété 'preventDefault' de undefined

Essayer de faire un simple événement/fonction onClick, dans ReactJS.

Lorsque le bouton est cliqué, je veux exécuter une fonction appelée "onClick", mais j'obtiens cette erreur dans la console:

app.js:62 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Ont googlé, mais pas sûr de ce que je vais mal. J'ai regardé la documentation de ReactJs et cela semble correct, mais évidemment pas. Voici mon code:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import axios from 'axios';

import Navbar from './components/Navbar';
import Header from './components/Header';
import GiphyButton from './components/GiphyButton';
import './assets/sass/main.scss';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      giphy: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    console.log('giffy button clicked');
    axios.get('http://api.giphy.com/v1/gifs/search?q=otters&api_key=<API KEY>')

      .then(res => {
        this.setState({ giphy: res.data });
        console.log(res.data);
      });
  }

  render() {
    return (
      <BrowserRouter>
        <main>
          <Navbar />
          <Header />
          <GiphyButton onClick={this.handleClick()}/>
        </main>
      </BrowserRouter>
    );
  }
}

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

GiphyButton est un composant, qui est littéralement, juste JSX pour a. Aucune autre fonction exécutée ici:

import React from 'react';

const GiphyButton = () => (

  <section>
    <button>See more otters</button>
  </section>
);

export default GiphyButton;

Je vous remercie.

javascriptreactjsfunctiononclickpreventdefault
7
Reena Verma

Pas la réponse à ma question, mais j'ai fini par changer la fonction pour handleSubmit et en la passant dans un formulaire dans lequel mon bouton se trouve. Cela a fonctionné.

2
Reena Verma

Vous devez lier cet événement à la fonction "handleClick ()". Comme suit,

<GiphyButton onClick={this.handleClick.bind(this)}/>
4
Sashini Hettiarachchi

Vous devez juste passer la fonction -handleClick et ne pas l'appeler

render() {
    return (
      <BrowserRouter>
        <main>
          <Navbar />
          <Header />
          <GiphyButton handleClick={this.handleClick}/>
        </main>
      </BrowserRouter>
    );
  }

Cela empêchait la transmission de l'objet événement, provoquant une erreur undefined.

Changez le code pour GiphyButton avec ce qui suit pour passer la méthode onclick -

import React from 'react';

const GiphyButton = (props) => (

  <section>
    <button onClick={props.handleClick}>See more otters</button>
  </section>
);

export default GiphyButton;
2
Vivek

la solution de Vivek est correcte. la raison pour laquelle il semble ne pas fonctionner pourrait être votre gestion d'erreur manquante. vérifiez l'url (peut-être quelque chose de mal avec la clé api?) et essayez d'attraper les erreurs axios. jetez un oeil ici:

exemple de code

0
ugrpla