feat: Extensive refactoring and modification to support any number of interfaces

src/views/Options/ReusableAutocomplete.js

@@ -0,0 +1,74 @@
+import { useState, useEffect, useRef } from "react";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+
+/**
+ * 一个可复用的 Autocomplete 组件，增加了 name 属性和标准化的 onChange 事件
+ * @param {object} props - 组件的 props
+ * @param {string} props.name - 表单字段的名称，会包含在 onChange 的 event.target 中
+ * @param {string} props.label - TextField 的标签
+ * @param {any} props.value - 受控组件的当前值
+ * @param {function} props.onChange - 值改变时的回调函数 (event) => {}
+ * @param {Array} props.options - Autocomplete 的选项列表
+ */
+export default function ReusableAutocomplete({
+  name,
+  label,
+  value,
+  onChange,
+  ...rest
+}) {
+  const [inputValue, setInputValue] = useState(value || "");
+  const isChangeCommitted = useRef(false);
+
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+
+  const triggerOnChange = (newValue) => {
+    if (onChange) {
+      const syntheticEvent = {
+        target: {
+          name: name,
+          value: newValue,
+        },
+      };
+      onChange(syntheticEvent);
+    }
+  };
+
+  const handleBlur = () => {
+    if (isChangeCommitted.current) {
+      isChangeCommitted.current = false;
+      return;
+    }
+
+    if (inputValue !== value) {
+      triggerOnChange(inputValue);
+    }
+  };
+
+  const handleChange = (event, newValue) => {
+    isChangeCommitted.current = true;
+    triggerOnChange(newValue);
+  };
+
+  const handleInputChange = (event, newInputValue) => {
+    isChangeCommitted.current = false;
+    setInputValue(newInputValue);
+  };
+
+  return (
+    <Autocomplete
+      value={value}
+      onChange={handleChange}
+      inputValue={inputValue}
+      onInputChange={handleInputChange}
+      onBlur={handleBlur}
+      {...rest}
+      renderInput={(params) => (
+        <TextField {...params} name={name} label={label} />
+      )}
+    />
+  );
+}