Reactのイベントハンドラーについて

Question

Reactの学習をしており、コンポネントを作成したのですが想定どおりの動きをさせるために何をすれば良いのかアドバイスいただければと存じます。

コンポネント↓

class Body extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            open: false,
            open2: false
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState(state => ({
            open: !state.open
        }));
    }

    render(){
        const answer1 = "15時までのご注文で当日配送いたしますので、最短で翌日にお届けとなります。また、発送が完了しだい追跡番号をお知らせいたしますので、発送後の配達状況をお調べいただくことができます。";
        const answer2 = "しろねこメイル便でのお届けとなります。他の配送業者様や配送方法をご指定いただくことはできません。";
        const answer3 = "このページからのご注文に限り、送料無料でお届けいたします！キャンペーンコードの入力が必要となりますので、入力漏れがないかお確かめください。";
        const answer4 = "大変申し訳ございませんが、返品は承っておりません。ただし、発送の際に商品チェックを実施しておりますが、万が一ご注文いただいた商品と異なっていたり、破損や不具合などが見つかりました場合は、返品・交換対応をさせていただきます。";
        return(
            <div>
                <div class="title">
                    <p>ご注文に際してよくあるご質問</p>
                </div>
                <div class="questions">
                    <label onClick={this.handleClick}>
                        <p>注文してからどのくらいで届きますか？▼
                            <p>
                                {
                                this.state.open === true ? answer1 : ""
                                }
                            </p>
                        </p>
                    </label>
                </div>
                <div class="questions">
                    <label onClick={this.handleClick}>
                        <p>配送業者を指定できますか？
                            <p>
                                {
                                this.state.open === true ? answer2 : ""
                                }
                            </p>
                        </p>
                    </label>
                </div>
                <div class="questions">
                    <label onClick={this.handleClick}>
                        <p>送料はかかりますか？
                            <p>
                                {
                                this.state.open === true ? answer3 : ""
                                }
                            </p>
                        </p>
                    </label>
                </div>
                <div class="questions">
                    <label onClick={this.handleClick}>
                        <p>返品は可能ですか？
                            <p>
                                {
                                this.state.open === true ? answer4 : ""
                                }
                            </p>
                        </p>
                    </label>
                </div>
            </div>
        );
    }
}

ブラウザには↓のように表示される

それぞれの質問をクリックした時に、対応する答えが出てほしいのですが、
現状のコードだと一つの質問をクリックすると、下記のように全ての質問の答えが表示されてしまいます。

クリックした質問に対応する答えのみ表示されるようにするには、どのような方法がありますでしょうか？
アドバイスいただけますと嬉しいです。

Answer 1

こんにちは、lisateratailさん

質問、拝見しました。

Reactのstate管理がうまくいっていないようです。

Reactの基本的な考え方としては判定が必要な項目分、stateを持つ必要があるです。

今回に関しては、answerが4つありますので、定義するstateも4つ必要です。

class Body extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            openAns1: false,
            openAns2: false,
            openAns3: false,
            openAns4: false,
        }

    }
    handleClick(targetName){
      console.log('targetName', targetName);
      console.log('this.state', this.state);
        this.setState({
            [targetName]: !this.state[targetName]
        });
    }

    render(){
        const answer1 = "15時までのご注文で当日配送いたしますので、最短で翌日にお届けとなります。また、発送が完了しだい追跡番号をお知らせいたしますので、発送後の配達状況をお調べいただくことができます。";
        const answer2 = "しろねこメイル便でのお届けとなります。他の配送業者様や配送方法をご指定いただくことはできません。";
        const answer3 = "このページからのご注文に限り、送料無料でお届けいたします！キャンペーンコードの入力が必要となりますので、入力漏れがないかお確かめください。";
        const answer4 = "大変申し訳ございませんが、返品は承っておりません。ただし、発送の際に商品チェックを実施しておりますが、万が一ご注文いただいた商品と異なっていたり、破損や不具合などが見つかりました場合は、返品・交換対応をさせていただきます。";
        return(
            <div>
                <div className="title">
                    <p>ご注文に際してよくあるご質問</p>
                </div>
                <div className="questions">
                    <label onClick={this.handleClick.bind(this, 'openAns1')}>
                        <p>注文してからどのくらいで届きますか？▼
                            <p>
                                {this.state.openAns1 && answer1}
                            </p>
                        </p>
                    </label>
                </div>
                <div className="questions">
                    <label onClick={this.handleClick.bind(this, 'openAns2')}>
                        <p>配送業者を指定できますか？
                            <p>
                                {this.state.openAns2 && answer2}
                            </p>
                        </p>
                    </label>
                </div>
                <div className="questions">
                    <label onClick={this.handleClick.bind(this, 'openAns3')}>
                        <p>送料はかかりますか？
                            <p>
                                {this.state.openAns3 && answer3}
                            </p>
                        </p>
                    </label>
                </div>
                <div className="questions">
                    <label onClick={this.handleClick.bind(this, 'openAns4')}>
                        <p>返品は可能ですか？
                            <p>
                                {this.state.openAns4 && answer4}
                            </p>
                        </p>
                    </label>
                </div>
            </div>
        );
    }
}

handleClickについては、それぞれanswer用のhandlerを4つ定義してもよいのですが、必要なのはstateの情報のみなので、state名をbindで引数として渡して、共通のhandlerでstateを更新するようにしています。

[targetName]: !this.state[targetName]の記法は、こちらが参考になると思いますので、ご参照ください。
ES2015以降のJavaScriptでObjectのkeyに変数を使う

以上、参考になれば幸いです。

Comments

[lisateratail]

ご回答いただき、ありがとうございます！
わかりやすい文章で解説いただき大変参考になりました。
リンクの共有もいただき、ありがとうございます。
コード写経して理解していこうと思います。

Answer 2

こんにちは

ご質問の本題である、

クリックした質問に対応する答えのみ表示されるようにするには、どのような方法がありますでしょうか？

への回答含め、ご質問に挙げられているコードのリファクタ案の一例を、以下の手順で説明します。

1. 質問と回答の組をReactコンポーネントの外に持つようにする。
2. Bodyコンポーネントのstateを修正
3. ひとつの質問とその回答を表示するdivを子コンポーネントにする。
4. クリックハンドラを修正
5. 上記の 1.〜 4.を組み合わせて動作するようにBodyを修正

1. 質問と回答の組をReactコンポーネントの外に持つようにする。

ご質問にある現状のコードでは、質問と回答のテキストが、 Bodyコンポーネントのrenderで返すJSXの中に書かれていますが、今後、質問の追加、削除、修正があったときに、手を加える箇所を分かりやすくするために、質問と回答の組を、コンポーネントの外で作ります。その一例として、以下のようなJSONテキストで持つようにします。

[
  {
    "id": 1,
    "text": "注文してからどのくらいで届きますか？",
    "answer": "15時までのご注文で当日配送いたしますので、最短で翌日にお届けとなります。また、発送が完了しだい追跡番号をお知らせいたしますので、発送後の配達状況をお調べいただくことができます。"
  },
  {
    "id": 2,
    "text": "配送業者を指定できますか？",
    "answer": "しろねこメイル便でのお届けとなります。他の配送業者様や配送方法をご指定いただくことはできません。"
  },
  {
    "id": 3,
    "text": "送料はかかりますか？",
    "answer": "このページからのご注文に限り、送料無料でお届けいたします！キャンペーンコードの入力が必要となりますので、入力漏れがないかお確かめください。"
  },
  {
    "id": 4,
    "text": "返品は可能ですか？",
    "answer": "大変申し訳ございませんが、返品は承っておりません。ただし、発送の際に商品チェックを実施しておりますが、万が一ご注文いただいた商品と異なっていたり、破損や不具合などが見つかりました場合は、返品・交換対応をさせていただきます。"
  }
]

上記のように、ひとつの質問と回答の組、およびユニークなidを持つオブジェクトの配列としておきます。このJSONを、Bodyのコンストラクターでパースします。

2. Bodyコンポーネントのstateを修正

• Body コンポーネントの state では、開いている（＝回答が表示されている）質問の id を配列で持つようにして、プロパティ名を openIds とします。
• this.state.openIdsが例えば [2, 4] のとき、id が 2と4の質問が開いている状態であることを表します。
• 初期表示ではすべての質問は閉じていることにするならば、this.state.openIds の初期値は、以下のように、空の配列です。

this.state = {
  openIds: []
};

3. ひとつの質問とその回答を表示するdivを子コンポーネントにする。

ひとつの質問とその回答を表示するdivを子コンポーネントに切り出します。これはstateを持つ必要がないので、functional componentにします。

const Question = ({ text, answer, isOpen, onClick }) => (
  <div class="question">
    <label onClick={onClick}>
      <p>{text}
        {isOpen && <p>{answer}</p>}
      </p>
    </label>
  </div>
);

上記で、回答の表示部分を

{isOpen && <p>{answer}</p>}

としていますが、ご質問にあるJSXに沿うと

<p>{isOpen ? answer : ''}</p>

というものになります。ただし、これだと、 isOpenがfalseのときにも、内容が空の <p></p>ができてしまいますので、これを避けるために

{isOpen && <p>{answer}</p>}

としています。

4. クリックハンドラを修正

Body の handleClick を以下のように修正します。

• 引数として、質問のidを受け取り、
• その id が this.state.openIds にあれば、this.state.openIdsから削除する、
• または、その id が this.state.openIds に無ければ、this.state.openIdsに追加する
• ように、this.state を更新

このような handleClick は以下のように書けます。

  handleClick(id) {
    let { openIds } = this.state;
    openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
    this.setState({ openIds });
  }

5. 上記の 1.〜 4.を組み合わせて動作するようにBodyを修正

上記の 1.〜 4.を組み合わせて動作するようにBodyを修正したものが以下です。

const QUESTIONS_JSON = `[
  {
    "id": 1,
    "text": "注文してからどのくらいで届きますか？",
    "answer": "15時までのご注文で当日配送いたしますので、最短で翌日にお届けとなります。また、発送が完了しだい追跡番号をお知らせいたしますので、発送後の配達状況をお調べいただくことができます。"
  },
  {
    "id": 2,
    "text": "配送業者を指定できますか？",
    "answer": "しろねこメイル便でのお届けとなります。他の配送業者様や配送方法をご指定いただくことはできません。"
  },
  {
    "id": 3,
    "text": "送料はかかりますか？",
    "answer": "このページからのご注文に限り、送料無料でお届けいたします！キャンペーンコードの入力が必要となりますので、入力漏れがないかお確かめください。"
  },
  {
    "id": 4,
    "text": "返品は可能ですか？",
    "answer": "大変申し訳ございませんが、返品は承っておりません。ただし、発送の際に商品チェックを実施しておりますが、万が一ご注文いただいた商品と異なっていたり、破損や不具合などが見つかりました場合は、返品・交換対応をさせていただきます。"
  }
]`;

const Question = ({ text, answer, isOpen, onClick }) => (
    <div class="question">
      <label onClick={onClick}>
        <p>{text}
          {isOpen && <p>{answer}</p>}
        </p>
      </label>
    </div>
);


class Body extends React.Component {

  constructor(props){
    super(props);
    this.questions = JSON.parse(QUESTIONS_JSON);
    this.state = {
      openIds: []
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(id) {
    let { openIds } = this.state;
    openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
    this.setState({ openIds });
  }

  render(){
    return(
      <div>
        <div class="title">
          <p>ご注文に際してよくあるご質問</p>
        </div>
        {this.questions.map(q => (
          <Question
            key={q.id}
            text={q.text}
            answer={q.answer}
            isOpen={this.state.openIds.includes(q.id)}
            onClick={() => { this.handleClick(q.id); }}
          />
        ))}
      </div>
    );
  }
}

以下にて、上記のBodyをマウントして動作確認できます。（スタイルは適当に作りました。）

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/LYEQOgq

補足

ご質問のコードのJSXに以下のテキスト

注文してからどのくらいで届きますか？▼

がありましたが、これの末尾にある ▼ は、回答が開いているときに表示するのか、閉じているときに表示するのか不明だったので、上記のコードには反映していませんが、 Questionコンポーネントのprop isOpen が true かfalseかによって、この▼のような、開閉状態を示す文字列を追加するorしない、という処理を追加すればよいかと思います。

補足2

Body の this.state.openIds を配列ではなく、オブジェクトで持つことも考えられます。この場合、コンストラクターで以下のように空オブジェクトで初期化します。

  this.state = {
    openIds: {}
  };

上記に合わせると、handleClick は以下のようになります。

  handleClick(id) {
    this.setState({ 
      openIds: {
        ...this.state.openIds,
        [id]: !this.state.openIds[id]
      }
    });
  }

さらに、render の中で Question に渡す isOpen を以下のように修正します。

isOpen={!!this.state.openIds[q.id]}

上記で!!は無くても動きますが、 boolean を渡すことを明示するために付けています。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/bGNLLgQ

以上、参考になれば幸いです。

Comments

[lisateratail]

ご回答いただきありがとうございます！　ゆくゆく応用編として質問と回答の組をJSONで管理できるようなコンポネントにしたいと思っておりましたので大変参考になりました。
全体的に新しいテクニックかつわかりやすい解説をいただき勉強になりました。

「4. クリックハンドラを修正」の「 let { openIds } = this.state;」について、解説いただけないでしょうか？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
や
https://qiita.com/takahiro_itazuri/items/1016494c2e3b815cbe6d
を参考にしてみたのですが理解できず。

宜しくお願いいたします。

[jun68ykt]

こんにちは

MDNの以下

>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

を参照されたとのことで、読むべきドキュメントは正しいです。

let { openIds } = this.state;

は、以下と同じです。

let openIds = this.state.openIds;

他の例を挙げると、たとえば

const obj = { x:1, y: 2, z: 3 };

というオブジェクト obj があったときに、 obj のプロパティである x, y ,z と同じ名前の変数 x, y, z　　に、
各々のプロパティの値である1, 2, 3 を入れたいときに、分割代入が使えるようになる以前だと

var x = obj.x;
var y = obj.y;
var z = obj.z;

とやっていましたが、ES2015から分割代入ができるようになってからは、以下の一行

const { x, y, z } = obj;

で済むようになりました。