Попытка сделать простое событие / функцию 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;
Спасибо.