質問編集履歴
2
タイトルを修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Reactで
|
|
1
|
+
ReactでuseStateがうまく効かない
|
body
CHANGED
|
File without changes
|
1
文言を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
フレームワークに`Next.js`を利用し、`React.js`を`TypeScript`形式で記述しています。
|
|
8
8
|
|
|
9
|
-
トグルさせる手法として`React Hook`を利用していて、`コンポーネント`の`トグル状態`、および`エレメント`を`
|
|
9
|
+
トグルさせる手法として`React Hook`を利用していて、`コンポーネント`の`トグル状態`、および`エレメント`を`useState`を利用して管理しています。
|
|
10
10
|
|
|
11
|
-
状態を管理するところまではうまく行ったのですが、トグルさせる処理がうまく行かないので、`
|
|
11
|
+
状態を管理するところまではうまく行ったのですが、トグルさせる処理がうまく行かないので、`useState`の挙動等についてご教授頂きたいです。
|
|
12
12
|
|
|
13
13
|
### 問題点
|
|
14
14
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
|
|
89
89
|
僕の期待では、下記の手順を踏むことで処理が行われることを期待しています。
|
|
90
90
|
|
|
91
|
-
1. まず`Cell`コンポーネント内部で`
|
|
91
|
+
1. まず`Cell`コンポーネント内部で`useState`メソッドが呼ばれ、`elementState.element`は`CellStyle`に設定される。
|
|
92
92
|
2. `Cell`コンポーネントをダブルクリックした場合、`elementState.selected`は`false`なので、`elementState.selected`は`true`に設定され、`elementState.element`は`InputStyle`に設定される。
|
|
93
93
|
3. 再度`Cell`コンポーネントをダブルクリックした場合、`elementState.selected`は`true`なので、`elementState.selected`は`false`に設定され、`elementState.element`は`CellStyle`に設定される。
|
|
94
94
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
`console.log`等でデバックしていると、上記`2`の部分で`elementState.element`は期待通り`InputStyle`に設定されていますが、`elementState.selected`が上手くいきません。
|
|
98
98
|
|
|
99
|
-
どなたか`
|
|
99
|
+
どなたか`useState`の挙動についてご教授頂ければと思います。
|
|
100
100
|
|
|
101
101
|
上記の説明を文字で見てもわかりづらいと思いますので、下記に再現可能なように環境情報を掲載させて頂きます。
|
|
102
102
|
|