react イベントハンドらからイベント

Question

すいません、初歩的なことなのですが、
イベントハンドラからイベントを呼ぶ場合どう書けばよかったでしょうか？

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {

  constructor(props) {
    super(props);
  }

click() {
  console.log(33);
  this.test;
}
test() {
  console.log(33333333);//ここ無反応
}

  render() {
    return (
      <h1 onClick={this.click.bind(this)}>Hello World</h1>
    )
  }
}

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

Answer 1

イベントではなくてメソッドですね。

---

click() メソッド中の this は恐らく Window オブジェクトと差していると思います。
App コンポーネントのインスタンスそのものを差すようにするには以下のようにしてください。

<h1 onClick={this.click.bind(this)}>Hello World</h1>

または、またはメソッドをアロー関数で定義することで避けられます。

reactjs - this.setState is undefined - Stack Overflow
javascript - Unable to access React instance (this) inside event handler - Stack Overflow

Comments

[cheche0830]

ありがとうございます！エラーは出なくなったのですが、
console.log(33333333);
が反応しないようで・・・

[og24715]

メソッド呼び出ししたいなら以下の様に () が必要なんじゃないですか？

x this.test
o this.test()

[og24715]

関数と宣言 · JavaScriptの入門書 #jsprimer https://asciidwango.github.io/js-primer/basic/function-declaration/#method

[cheche0830]

できました！！this.testとthis.test()の違いが良くわかっていないので勉強してみます！！ありがとうございました！

[og24715]

> this.testとthis.test()の違いが良くわかっていないので勉強してみます

おせっかいですが JS の基本構文の基礎なしで React に挑むのは無謀に感じるので React の前に JS の初歩からやり直すことをおすすめします。

関数を呼び出す - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#Calling_functions

[cheche0830]

おっしゃるとおりです・・
jqueryしかさわったことがなく、jsを勉強と思ったのですがなにからしていいのかわからず、reactをやる機会があったので、reactをやりつつjsを猛勉強中でございます・・

[og24715]

応援してます。React はいいぞ

[cheche0830]

がんばります！jqueryになれてしまったのでどうしてもdomを直接操作しそうになってしまいます。