ReactJS - Невозможно прочитать свойство 'protectDefault' из неопределенного - PullRequest
Новая
       16

ReactJS - Невозможно прочитать свойство 'protectDefault' из неопределенного

0 голосов
/ 23 июня 2018

Попытка сделать простое событие / функцию onClick в ReactJS.

Когда кнопка нажата, я хочу запустить функцию "onClick", но я получаю эту ошибку в консоли: 

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

Погуглил, но не уверен, что я иду не так. Я посмотрел на документацию ReactJs, и это выглядит правильно, но, очевидно, нет. Вот мой код: 

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 - это компонент, который буквально просто JSX для a. Другие функции здесь не выполняются:

импорт React из'act '; 

const GiphyButton = () => (

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

export default GiphyButton;

Спасибо.

Ответы [ 4 ]

0 голосов
/ 03 ноября 2018

Вы должны связать это событие с функцией handleClick ().Следующим образом: 

<GiphyButton onClick={this.handleClick.bind(this)}/>
0 голосов
/ 24 июня 2018

решение Vivek является правильным. причина, по которой он, кажется, не запускается, может заключаться в отсутствии обработки ошибок. проверьте URL (может быть, что-то не так с ключом API?) и попробуйте перехватить ошибки axios. посмотрите здесь:

пример кода

0 голосов
/ 25 июня 2018

Не ответ на мой вопрос, но в итоге я изменил функцию handleSubmit и передал ее в форму, в которой находится моя кнопка. Это сработало.

0 голосов
/ 23 июня 2018

Вы должны просто передать функцию - handleClick и не вызывать ее 

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

Это препятствовало передаче объекта события, вызывая ошибку undefined.

Измените код для GiphyButton с последующим пропуском метода onclick - 

import React from 'react';

const GiphyButton = (props) => (

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

export default GiphyButton;
...