断面性能計算で計算ボタンを押さなくても即時計算するように修正

st-func · Apr 13, 2024 · 8524f58 · 8524f58
1 parent 0da56e2
commit 8524f58
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/SecProperty.tsx b/src/SecProperty.tsx
@@ -46,8 +46,12 @@ interface DimensionData {
 }
 interface DimensionDataProps {
   dimensionDatas: DimensionData[];
+  calculation: () => void;
 }
-const InputTable: React.FC<DimensionDataProps> = ({ dimensionDatas }) => (
+const InputTable: React.FC<DimensionDataProps> = ({
+  dimensionDatas,
+  calculation,
+}) => (
   <table>
     <tbody>
       {dimensionDatas.map((dimension) => (
@@ -58,7 +62,10 @@ const InputTable: React.FC<DimensionDataProps> = ({ dimensionDatas }) => (
             <input
               type="number"
               value={dimension.value}
-              onChange={(e) => dimension.setNum(e.target.value)}
+              onChange={(e) => {
+                dimension.setNum(e.target.value);
+                calculation();
+              }}
             />
             {dimension.unit}
           </td>
@@ -111,7 +118,7 @@ const SecProperty: React.FC = () => {
     }));
   };
 
-  const handleCalculation = () => {
+  const calculation = () => {
     let secSteel: SecSteel;
     if (calcMode === SecShapeType.BuildBox) {
       const secBuildBox: SecBuildBox = new SecBuildBox();
@@ -174,11 +181,13 @@ const SecProperty: React.FC = () => {
       </div>
       <div>
         <h3>断面寸法</h3>
-        <InputTable dimensionDatas={getDimensions()} />
+        <InputTable
+          dimensionDatas={getDimensions()}
+          calculation={calculation}
+        />
       </div>
       <div>
         <h3>計算結果</h3>
-        <button onClick={handleCalculation}>計算</button>
         {result !== undefined && <ResultTable calcDatas={result} />}
       </div>
     </div>