mrkvon 1 year ago
parent
commit
2c70d7f305
1 changed files with 16 additions and 8 deletions
  1. 16
    8
      src/ChordForm.tsx

+ 16
- 8
src/ChordForm.tsx View File

@@ -1,4 +1,10 @@
1
-import React, { useState, ReactElement, FormEvent, ChangeEvent } from 'react';
1
+import React, {
2
+  useState,
3
+  useEffect,
4
+  ReactElement,
5
+  FormEvent,
6
+  ChangeEvent,
7
+} from 'react';
2 8
 import { chord2fingering, chords, notes, accidentals } from './chords';
3 9
 
4 10
 const availableChords = Object.keys(chords);
@@ -13,6 +19,15 @@ const ChordForm = ({
13 19
   const [chord, setChord] = useState('');
14 20
   const [error, setError] = useState('');
15 21
 
22
+  useEffect(() => {
23
+    try {
24
+      chord2fingering(chord);
25
+      setError('');
26
+    } catch (e) {
27
+      setError(e.message);
28
+    }
29
+  }, [chord]);
30
+
16 31
   const handleSubmit = (e: FormEvent) => {
17 32
     e.preventDefault();
18 33
     setChord('');
@@ -21,14 +36,7 @@ const ChordForm = ({
21 36
 
22 37
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
23 38
     const value = e.target.value;
24
-
25 39
     setChord(value);
26
-    try {
27
-      chord2fingering(value);
28
-      setError('');
29
-    } catch (e) {
30
-      setError(e.message);
31
-    }
32 40
   };
33 41
 
34 42
   return (