質問編集履歴

1

デモ更新

2021/02/18 13:38

投稿

erajera
erajera

スコア22

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  下記はデモです。
8
8
 
9
- [demo](https://codesandbox.io/s/goofy-glitter-slx3y?fontsize=14&hidenavigation=1&theme=dark)
9
+ [demo](https://codesandbox.io/s/kind-monad-9huvo?fontsize=14&hidenavigation=1&theme=dark)
10
10
 
11
11
  1つ目のinputに```hoge```を入力すると、2つ目のinputが入力できるようになります。
12
12
 
@@ -34,7 +34,41 @@
34
34
 
35
35
 
36
36
 
37
+ カスタムフック```useCount.js```
38
+
39
+ ```js
40
+
41
+ export const useCount = () => {
42
+
43
+ const [text1, setText1] = useState("");
44
+
37
- デモのコード量が多いことからコピペするとスペースをかなり喰いそうなので、恐れ入りますがデモの```CodeSandBox```をご確認ください。
45
+ const input1 = ({ target: { value } }) => setText1(value);
46
+
47
+ const [text2, setText2] = useState("");
48
+
49
+ const input2 = ({ target: { value } }) => setText2(value);
50
+
51
+
52
+
53
+ const [count, setCount] = useState(0);
54
+
55
+ useEffect(() => {
56
+
57
+ const countUp = () => setCount((count) => count + 1);
58
+
59
+ const timerID = setInterval(countUp, 1000);
60
+
61
+ return () => clearInterval(timerID);
62
+
63
+ }, []);
64
+
65
+
66
+
67
+ return { input1, text1, input2, text2, count };
68
+
69
+ };
70
+
71
+ ```
38
72
 
39
73
 
40
74