質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16392questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    112questions

[Redux]aタグをクリックした際にアクションを実行するには

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 178

kk123

score 109

 聞きたいこと

aタグのonClick属性に、actionで定義した関数を指定し、引数を渡したいと思っています。
下に書いてあるような実装をしているのですが、エラーになってしまいうまく実行できません。
どなたかヒント等ありましたら教えていただきたいです。

 コード・エラー内容

  • Components
import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

import { readLanguages, readRepositories } from '../actions';

class LanguagesIndex extends Component {
  componentDidMount() {
    this.props.readLanguages()
  }

  renderLanguages() {
    return _.map(this.props.languages, language => (
      <React.Fragment>
        |<a href="#" onClick={this.props.readRepositories(language.id)}>{language.name}</a> !!!←ここのaタグのonClickに対してアクションで定義したreadRepositories関数を割り当てたい
      </React.Fragment>
    ))
  }

  render() {
  省略
}

const mapStateToProps = state => ({ languages: state.languages })
const mapDispatchToProps = ({ readLanguages, readRepositories })

export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
  • Action
import axios from 'axios';

export const READ_REPOSITORIES = 'READ_REPOSITORIES';
export const READ_LANGUAGES = 'READ_LANGUAGES';

const ROOT_URL = 'https://api.server.com';
const OPTIONS = {
  headers: {
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
  }
};

export const readRepositories = () => async (dispatch, id=1) => { !!!←ここでidとしてパラメーターを受け取れるようにしたい
  const response = await axios.get(`${ROOT_URL}/repositories?id=${id}`, OPTIONS);
  // console.log(Config());
  dispatch({ type: READ_REPOSITORIES, response });
}

export const readLanguages = () => async dispatch => {
  const response = await axios.get(`${ROOT_URL}/languages`, OPTIONS);
  dispatch({ type: READ_LANGUAGES, response });
}
  • エラー内容
index.js:2178 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type.
    in a (at languages_index.js:15)
    in td (at languages_index.js:33)
    in tr (at languages_index.js:26)
    in tbody (at languages_index.js:25)
    in table (at languages_index.js:24)
    in LanguagesIndex (created by Connect(LanguagesIndex))
    in Connect(LanguagesIndex) (at index.js:19)
    in div (at index.js:18)
    in Provider (at index.js:17)
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

回答 1

checkベストアンサー

+2

 前提

※ action creatorの書き方から、redux-thunkミドルウェアを使っていると解釈したので、それを前提とした回答になります。
※ 動作確認をしていないので変なミスがあったり、質問には掲載されていないコードの部分でエラーが出る可能性もありますが、その場合は、とりあえず参考までにということで。

 component

class LanguagesIndex extends Component {

    //(略)

    readRepositories(event, id) {
        // リンク先が#だけど、一応いれておく。
        event.preventDefault();

        this.props.readRepositories(id)
    }

    renderLanguages() {
        return _.map(this.props.languages, language => (
            <React.Fragment>
                <a 
                    href="#" 
                    onClick={(event) => this.readRepositories(event, language.id)}
                >
                    {language.name}
                </a>
            </React.Fragment>
        ))
    }

    // (略)
}

 action

//(略)
export const readRepositories = (id = 1) => async (dispatch) => {     
    const response = await axios.get(`${ROOT_URL}/repositories?id=${id}`, OPTIONS);
    dispatch({ type: READ_REPOSITORIES, response });
}
//(略)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/07 11:34

    ご回答ありがとうございます!
    無事解決できました!ちなみに今回はaタグのonClick属性には、LanguagesIndexコンポーネント内で定義した関数を使用していますが、
    直接Actionを実行することも可能なのでしょうか…?
    最初に私が上記方法でトライしようとしたのですが、うまくいかず…仕様的に無理とかでしょうか・・・

    キャンセル

  • 2018/07/07 11:39

    どういたしまして!回答に載せていたコードのonClick部分を`onClick={() => this.props.readRepositories(language.id)}`に変えても動作すると思います。

    キャンセル

  • 2018/07/07 11:43

    なるほど…ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    react-reduxでのconnectについて

    最近ちょっと使い始めたのですが、react.jsのcomponentとreduxとで連携するためにconnectすると思うのですが、実際に作り始めてみるとほとんどのcomponen

  • 解決済

    react navigationで画面遷移ができない(react native)

    React Nativeの画面遷移でReact Navigationを導入したいと考えています。 イメージとしては、ホームにいくつかサムネイルが並んでいて、これをクリックすると詳細

  • 解決済

    react 複数のクリックイベント

    もしかするとreact以前の問題かもしれないのですが・・・ class Names extends React.Component{ constructor(props

  • 解決済

    reactで別のコンポーネントからsetStateしたい

     前提・実現したいこと 今現在reactを触っているのですが、やりたいことができず困ってます。 あるコンポーネントから別のコンポーネントのstateの値を変更したいです。  該

  • 解決済

    react 特定のstateを変更したい

    reactでstateを変更したいのですが うまくできないので教えてください。 this.state = { index: 0, count: [ { test

  • 解決済

    React : props の値によって適用するcssのプロパティを変更したい

    状況 reactでwebアプリケーションを作成しています。 CSSの管理はahrpditeというCSSinJSを実現するパッケージを使ってます。 やりたいこと propsの値に

  • 解決済

    Reactでクラスを使いたいです。

    Reactにて、クラスコンポーネントを使用し、タブ切り替えを作りたいのですが、そもそも、クラスを使いwebpackでビルドしても、表示されません。 使用できるバージョンがあるの

  • 解決済

    Reactでjpgファイルが読み込めない

    React.jsでWEBアプリを開発しています。なぜかわからないのですが、background-imageがReactのインラインスタイルでは上手く読み込めません。  フォルダ

同じタグがついた質問を見る

  • JavaScript

    16392questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    112questions