web-dev-qa-db-ja.com

ReactJS-未定義のプロパティ「preventDefault」を読み取れません

ReactJSで単純なonClickイベント/関数を実行しようとしています。

ボタンがクリックされたときに、「onClick」という関数を実行したいのですが、コンソールに次のエラーが表示されます。

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

ググったが、何が悪いのかわからない。私はReactJのドキュメントを見ましたが、これは正しいように見えますが、明らかにそうではありません。これが私のコードです：

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 for aのコンポーネントです。ここで実行されている他の関数はありません：

import React from 'react';

const GiphyButton = () => (

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

export default GiphyButton;

ありがとうございました。

javascriptreactjsfunctiononclickpreventdefault
7
Reena Verma

私の質問に対する答えではありませんが、私は関数をhandleSubmitに変更し、これをフォームに渡すことになりました。フォームには、ボタンが配置されています。これでうまくいきました。

2
Reena Verma

このイベントを「handleClick（）」関数にバインドする必要があります。次のように、

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

関数-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;
2
Vivek

vivekの解は正しいです。実行されないように見える理由は、不足しているエラー処理である可能性があります。 URL（APIキーに問題がある可能性がありますか？）を確認して、axiosエラーをキャッチしてください。ここを見てください：

コード例

0
ugrpla