回答率: 85.47%

質問するログイン新規登録

トップ React.jsに関する質問 Reactのイベントハンドラーについて

編集履歴

回答編集履歴

4

テキスト修正

2020/01/08 07:13

投稿

スコア9058

test CHANGED Viewed

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

3

テキスト修正

2020/01/08 07:13

投稿

スコア9058

test CHANGED Viewed

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

2

テキスト修正

2020/01/08 07:10

投稿

スコア9058

test CHANGED Viewed

@@ -402,6 +402,64 @@
+### 補足2
+Body の `this.state.openIds` を配列ではなく、オブジェクトで持つことも考えられます。この場合、コンストラクターで以下のように空オブジェクトで初期化します。
+```javascript
+  this.state = {
+    openIds: {}
+  };
+```
+上記に合わせると、`handleClick` は以下のようになります。
+```javascript
+  handleClick(id) {
+    this.setState({
+      openIds: {
+        ...this.state.openIds,
+        [id]: !this.state.openIds[id]
+      }
+    });
+  }
+```
+さらに、render の中で `Question` に渡す `isOpen` を以下のように修正します。
+```jsx
+isOpen={!!this.state.openIds[q.id]}
+```
+上記で`!!`は無くても動きますが、 boolean を渡すことを明示するために付けています。
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/bGNLLgQ](https://codepen.io/jun68ykt/pen/bGNLLgQ)

1

テキスト修正

2020/01/08 06:15

投稿

スコア9058

test CHANGED Viewed

@@ -350,6 +350,8 @@
           <Question
+            key={q.id}
             text={q.text}
             answer={q.answer}