ReactコンポーネントのonClick属性について

Question

解決したいこと

ReactコンポーネントのonClick属性にメソッドを入れた場合とアロー関数を入れた場合の違いを理解したい。

きっかけとなったエラー

class Prev extends Component {
  prev={
    position:"absolute",
    top:"50%",
    left:"25%",
    width:"50px",
    height:"50px",
    fontSize:"30px",
    cursor:"pointer",
  }
  
  prev() {
    return this.props.dispatch({type:'PREV'});
  }
  
  render() {
    return (
      <button style={this.prev} onClick={this.prev}>&lt;</button>...①
      <button style={this.prev} onClick={()=>this.props.dispatch({type:'PREV'})}>&lt;</button>...②
    );
  }
}

export default connect((state)=>state)(Prev);

①の場合では
Uncaught Error: Expected onClick listener to be a function, instead got a value of object type.というエラーになってしまうが、
②の場合では
特にエラーはなくちゃんと動作しました。

自分考え

①の場合もオブジェクトを返していると思うのでエラー文の意味がわからなかった。

どなたかわかる方いたらアドバイスしてくれると助かります。

Answer 1

こんにちは

スタイルを記述している、

prev={
・・・
}

と、クリック時のコールバックにする

prev() {
・・・
}

とが、両方とも名前がprev で重複しているのが問題なのではと思いますので、スタイルのほうを、prevではなく例えば

- prev={
+ style = {
・・・
}

にしておいて、 <button> の style propに渡すところも

<button style={this.style} ・・・

に修正してみるといかがでしょうか？

Comments

[maisumakun]

メソッドをそのまま渡すとthisがずれる問題が起きますが、それはまた別な話ということで。

[jun68ykt]

あ、そうですね。this に bind して渡す修正も必要ですね。ご指摘ありがとうございます。

[muratariku]

なるほど！それは盲点でした。ありがとうございます！上手くいきました。
bindもありがとうございます。

[jun68ykt]

@marronmarronさん
どういたしまして。解決したようで、よかったです????

Answer 2

①の場合もオブジェクトを返していると思うのでエラー文の意味がわからなかった。

この疑問の意味がわかりません。①の場合、オブジェクトを渡しているからエラーになっています。

なお、prevをメソッドとプロパティの両者で同名として作成していますが、この場合、コンストラクタで初期化されるprev = { /*略*/ };がメソッドを上書きします。

Comments

[muratariku]

なるほど、instead got a value of object type.の文が代わりにオブジェクトを取得せよと思ってしまいました。prevというスタイルのオブジェクトをonClickに入れていたということに気づきました！
ありがとうございます。

Answer 3

const prev =() => {
   this.props.dispatch({type:'PREV'});
}
コード

Comments

[muratariku]

返信ありがとうございます。