更改结果表格中的输入框,现在失焦或按下回车后need_list才会变化

DSPCalculator · Dec 29, 2023 · 0167a92 · 0167a92
1 parent a87b0dd
commit 0167a92
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/auto_sized_input.jsx b/src/auto_sized_input.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import { useRef, useState } from 'react';
 const input_style = {
   padding: 0,
   margin: 0,
@@ -30,6 +32,29 @@ const template_style = {
   paddingRight: '6px',
 }
 
+const DelayedInput_style = {
+  ...input_style,
+  position: 'relative',
+  width: '80%',
+  minWidth: '80px',
+  margin: 5,
+}
+
+export const DelayedInput = ({ value, onChange }) => {
+  const [displayedValue, setValue] = useState(null);
+  return (
+    <input style={DelayedInput_style}
+      type="text"
+      value={displayedValue || value}
+      onBlur={e => {
+        onChange(e.target.value);
+        setv(null);
+      }}
+      onChange={e => setValue(e.target.value)}
+      onKeyDown={e => { if (e.key == "Enter") onChange(e.target.value); }}
+    />
+  );
+}
 export const AutoSizedInput = ({ value, onChange }) => {
   return (
     <label style={label_style}>

diff --git a/src/result.jsx b/src/result.jsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { GlobalStateContext, SchemeDataSetterContext, UiSettingsSetterContext } from './contexts';
-import { AutoSizedInput } from './auto_sized_input.jsx';
+import { AutoSizedInput, DelayedInput } from './auto_sized_input.jsx';
 import { NplRows } from './natural_production_line';
 import { HorizontalMultiButtonSelect, ItemIcon, Recipe } from './recipe';
 
@@ -272,15 +272,15 @@ export function Result({ needs_list, set_needs_list }) {
             </div></td>
             {/* 分钟毛产出 */}
             <td className="text-center">
-                <AutoSizedInput value={get_gross_output(result_dict[i], i).toFixed(fixed_num)} onChange={set_needs_in_row(result_dict[i])} />
+                <DelayedInput value={get_gross_output(result_dict[i], i).toFixed(fixed_num)} onChange={set_needs_in_row(result_dict[i])} />
                 {from_side_products}
             </td>
             {/* 所需工厂*数目 */}
             <td className="text-nowrap">
                 {is_mineralized ||
                     <>
                         <ItemIcon item={factory_name} size={30} />
-                        <AutoSizedInput value={factory_number} onChange={set_needs_in_row(factory_number)} />
+                        <DelayedInput value={factory_number} onChange={set_needs_in_row(factory_number)} />
                     </>
                 }
             </td>

diff --git a/src/scheme_data.jsx b/src/scheme_data.jsx
@@ -64,14 +64,6 @@ export function FractionatingSetting() {
                 let fractionating_speed = parseFloat(event.target.value) || 0;
                 let new_scheme_data = structuredClone(prev_scheme_data);
                 new_scheme_data.fractionating_speed = fractionating_speed;
-
-                // TODO calculate fractionating_speed somewhere else
-                // if (fractionating_speed > 1800) {
-                //     game_data.factory_data["分馏设备"][0]["耗能"] = scheme_data.fractionating_speed * 0.0006 - 0.36;
-                // }
-                // else {
-                //     game_data.factory_data["分馏设备"][0]["耗能"] = 0.72;
-                // }
                 return new_scheme_data;
             })} />
     </span>;