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

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

ただいまの
回答率

90.49%

  • JavaScript

    16461questions

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

  • React.js

    835questions

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

  • Redux

    112questions

reactのcomponentのonClickイベントについて

解決済

回答 2

投稿

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

k-higa

score 13

react初心者です。
今個人でreact-reduxを使ってwebアプリケーションを作成していますが、ハマってしまいました。

やりたいこと
1 サーバー側からカテゴリの一覧を取得してそれを画面に表示する。
2 ボタンをクリックすると表示されたカテゴリ名を編集できる

という画面を作っているのですが、
カテゴリが複数表示された場合の動きが上手く行っていないです。
例えば

カテゴリA
カテゴリB
というカテゴリがあり、

カテゴリAの編集ボタンをクリックするとカテゴリAのonClickイベントが動いた後に、
カテゴリBのonClickも動いてしまっています。。

カテゴリAのonClickイベントだけを動かしたいのですが、ご教授いただけると助かります。

import Category from "../containers/Category";
import React, {Component} from 'react';

<div className="container">
  <h4 className="title">タイトル</h4>
  const {categoryList} = this.props //サーバー側から取得したカテゴリのリスト
  {
            categoryList.map(cate => {
                return <Category key={cate.id} groupId={cate.id} groupName={cate.name}/>
            }); 
 }
</div>

conteiner

import {connect} from 'react-redux';
import {Category} from "../components/Category";
import * as actions from "../actions/Category";


const mapStateToProps = (state, ownProps) => ({
    groupId: ownProps.groupId,
    groupName: state.Category.groupName === undefined ? ownProps.groupName : state.Category.groupName,
    isEditingGroupName: state.Category.isEditingGroupName
});


const mapDispatchToProps = dispatch => ({
    editGroupName() {
        dispatch(actions.editGroupName());
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Category);


action

export const editingGroupName = (isEdit) => ({
    type: 'EDIT_GROUP_NAME',
    payload: {isEdit}
});

export const editGroupName = () => {
    return (dispatch, getState) => {
        window.alert("edit group name!!");
        dispatch(editingGroupName(true));
    }
};


reducer

const initialState = {
    groupId: undefined,
    groupName: undefined,
    isEditingGroupName: false
};


export default (state = initialState, action) => {
    switch (action.type) {
        case 'EDIT_GROUP_NAME':
            return {
                ...state,
                isEditingGroupName: action.payload.isEdit
            }
        default:
            return state;
    }
};

components

import React, {Component} from 'react';

export class Category extends Component {

  render() {
    return (
        <div>
          <button className="btn" onClick={() => this.props.editGroupName()}>
            編集ボタン
          </button>
          <h4>{this.props.groupName}</h4>
        </div>
    )
  }
}

export default Category;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • jun68ykt

    2018/06/19 10:31

    要望ですが、ご質問に挙がっているソースを GitHub に入れて、回答者が git clone; yarn install; yarn start することで、「カテゴリが複数表示された場合の動きが上手く行っていない」状況をすぐに再現できるようにして頂くことは可能でしょうか?

    キャンセル

回答 2

checkベストアンサー

0

Storeにカテゴリ1つ分のstateしかないのが原因ではないでしょうか?
全てのカテゴリコンポーネントが同じstateを参照して、振舞っている感じです。

カテゴリごとにキー(cate.id)を振って、カテゴリ分のstateを扱えるよう、stateを生成するreducerも追加する必要があると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/21 22:04

    返事がおそくなってすみません。
    おっしゃる通り、onClickイベントが呼ばれているわけではなく、同じstateを参照しているだけでした。

    >カテゴリ分のstateを扱えるよう、stateを生成するreducerも追加する必要があると思います。

    こちらの具体的なやり方を伺ってもよろしいでしょうか?

    キャンセル

  • 2018/06/22 10:20 編集

    以下のような、actionをdispatchして、

    ```
    {type: 'FETCH_CATEGORIES', payload: CategoryList} // CategoryListは、(container).props.CategoryListと同様のデータ
    ```

    reducerで、

    ```
    case 'FETCH_CATEGORIES':
    // lodashのmapkeysを利用するともっとシンプルになりますが・・・
    const categoryList = action.payload;
    const categories = [];
    Object.keys(categoryList).map((key => {
    categories[key] = {...initialState, ...categoryList[key]};
    });
    return categories;
    ```

    EDIT_GROUP_NAMEのactionに、id: cate.id を追加してreducerで、どのidを対象にするか判別する。

    ```
    case 'EDIT_GROUP_NAME':
    return {...state, [action.id]: {...state[action.id], isEditingGroupName: action.payload.isEdit}};
    ```

    ような、感じでどうでしょう?
    動作未確認ですので、あしからず(^_^;)

    最適なstateの構造は、アプリによってまちまちだと思いますので、あくまで一例として。

    キャンセル

  • 2018/06/22 10:26

    コメントはmd効かないんですね(^_^;)

    キャンセル

  • 2018/06/23 16:34

    ありがとうございます!
    試してみます!

    キャンセル

0

カテゴリAの編集ボタンをクリックするとカテゴリAのonClickイベントが動いた後に、
カテゴリBのonClickも動いてしまっています。。

カテゴリAのonClickイベントだけを動かしたいのですが、ご教授いただけると助かります。

コードを見る限り別のカテゴリコンポーネント onClick が発火するように思えません。
原因を明確にするためにも最後のコードブロックを以下のように編集して試してみてください。
憶測ですが onClick が同時に動作してしまうというより、カテゴリーコンテナーが同じ Redux を購読しているが原因ではないでしょうか。

import React, {Component} from 'react';

export class Category extends Component {

render() {
  return (
    <div>
      <button className="btn" onClick={() => {
        console.log(`${this.props.groupName} was cliked`); // <- 追加
        this.props.editGroupName()
      }}>
      編集ボタン
      </button>
    <h4>{this.props.groupName}</h4>
    </div>
  )
  }
}

export default Category;

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/21 22:05

    返事がおそくなってすみません。
    onClickイベントが呼ばれているわけではなく、同じstateを参照しているだけでした。
    どうもありがとうございました!

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16461questions

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

  • React.js

    835questions

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

  • Redux

    112questions