时间戳

首页 > 解决方案 > MobX 表单的最佳实践不直接更新表单外的 UI

reactjs - MobX 表单的最佳实践不直接更新表单外的 UI

问题描述

我有一个用于在应用程序中更新用户个人资料的表单，其中包含姓名、电子邮件等字段。在屏幕的右上角有一个小下拉菜单，其中包含他们的图片、姓名、电子邮件以及设置、注销等选项。

mobx 中的最佳实践方法是让表单使用商店进行状态管理，同时在您键入时也不会在此下拉小部件中更新值？

现在我的商店中只有单独的对象：profileFormValues 和 userData 并使用 profileFormValues 作为表单并更新配置文件和 userData 以在应用程序的其他位置显示它。更新成功后，它将 userData 设置为 profileFormValues。这感觉很草率，我希望有一些方法可以更干净地做到这一点并保持 userData 的单一事实来源

几乎可以肯定有人问过这个问题，但我不知道如何用词来确定要知道的标题

标签： reactjsmobxmobx-react

解决方案

ViewModelmobx-utils包装中的内容非常适合您的用例。

例子

const { useState } = React;
const { observable } = mobx;
const { observer } = mobxReactLite;
const { createViewModel } = mobxUtils;

const state = observable({
  email: "foo@bar.com",
  name: "baz"
});

const App = observer(() => {
  const [viewState] = useState(() => createViewModel(state));

  return (
    <div>
      <h1>Global state:</h1>
      <div>{JSON.stringify(state)}</div>
      <h2>View state:</h2>
      <div>{JSON.stringify(viewState)}</div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          viewState.submit();
        }}
      >
        <input
          value={viewState.email}
          onChange={(e) => viewState.email = e.target.value}
        />
        <input
          value={viewState.name}
          onChange={(e) => viewState.name = e.target.value}
        />
        <button>Submit</button>
      </form>
    </div>
  );
});

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx@6.0.4/dist/mobx.umd.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx-react-lite@3.1.6/dist/mobxreactlite.umd.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx-utils@6.0.3/mobx-utils.umd.min.js"></script>

<div id="root"></div>

推荐阅读