React - 表单和zustand双向绑定

上代码

zustand部分：

定义了一个ConfigData接口作为表单数据类型，接着使用initialFormState来进行表单的初始化。

import { create } from "zustand";
import WailsResp from "@/types/wails_resp";
import {
  ConfigPassAddOrUpdate,
  ConfigPassDelete,
  ConfigPassGetList,
} from "@/wailsjs/go/apps/App";
import { Notification, Modal } from "@douyinfe/semi-ui";

// 暴露接口
interface ConfigData {
  id: number;
  priority: number;
  username: string;
  password: string;
  port: string;
  status: boolean;
}

interface ConfigStore {
  form: ConfigData;
  show: boolean;
  dataList: ConfigData[];
  update: (update: Partial<ConfigStore>) => void;
  reset: () => void;
  resetForm: () => void;
}

// 初始状态
const initialState: Pick<ConfigStore, "dataList"> = {
  dataList: [],
};

// 初始表单状态
const initialFormState: Pick<ConfigStore, "form" | "show"> = {
  form: {
    id: 0,
    priority: 100,
    username: "",
    password: "",
    port: "623",
    status: false,
  },
  show: false,
};

// 创建store
const useConfigStore = create<ConfigStore>((set, get) => ({
  ...initialState, // 初始化状态
  ...initialFormState, // 初始化表单状态
  update: (update: Partial<ConfigStore>) =>
    set((state) => ({ ...state, ...update })),
  reset: () => set(initialState),
  resetForm: () => set(initialFormState),
}));

export default useConfigStore;

表单部分：

引入zustand状态模块后得到表单数据，通过initValues={form}绑定到组件中，但这仅仅只是绑定到了组件，
如果现在在组件中修改表单输入框的内容，数据是没法同步到zustand的状态模块的。

接着需要使用onValueChange监听表单值变化，通过函数handleFormChange将新的值回写到状态模块，实现双向绑定。

import { SideSheet, Button } from "@douyinfe/semi-ui";
import { Form } from "@douyinfe/semi-ui";
import useConfigStore from "@/store/store_config";

const ViewSidePass = () => {
  const { form, show, AddOrUpdate, update } = useConfigStore();

  // 处理表单值变化
  const handleFormChange = (values: any) => {
    console.log("Form values changed:", values);
    update({ form: { ...form, ...values } });
  };

  return (
    <div>
      <SideSheet
        title="密码组"
        visible={show}
        onCancel={() => update({ show: false })}
      >
        <div>
          <Form initValues={form} onValueChange={handleFormChange}>
            <Form.Input
              field="priority"
              label="优先级"
              placeholder="越高越优先"
            />
            <Form.Input
              field="username"
              label="用户名"
              placeholder="登录IPMI的用户名"
            />
            <Form.Input
              field="password"
              label="密码"
              placeholder="登录IPMI的密码"
            />
            <Form.Input field="port" label="端口" placeholder="一般默认623" />
          </Form>
        </div>
      </SideSheet>
    </div>
  );
};

export default ViewSidePass;