reactjs - 如何从外部用户操作设置/更改字段值 🏁 React Final Form

Question

在很多情况下，我们可能希望设置表单中特定字段的值来帮助用户。

例如，在线水果商店可能会询问用户想要购买多少个苹果。为了帮助用户，我们可以有 3 个按钮，例如

• “最小值”- 将字段值设置为商店可以实际销售的最小数量
• “最大值” - 同上，但对于最大值
• “我上次买的东西” - 将字段值设置为用户上次购买的苹果数量

在查看了我认为最相关的两个示例( Loading and Initializing Values 和 Calculated Fields )之后，我仍然无法在不变得太老套的情况下弄清楚这个。

我们如何通过用户操作(例如单击按钮)设置字段的值？

Answer 1

这可以通过向包含必要的变体的 Form 组件提供一个 mutators 对象来完成，这些变体将可供您的组件使用:

<Form
  mutators={{
    setMin: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 1)
    },
    setMax: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 100)
    },
    setLast: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 6)
    },
  }}
  
  render={({ form, ...rest }) => (
    <>
      <button onClick={form.mutators.setMin}>minimum apples</button>
      <button onClick={form.mutators.setMax}>maximum apples</button>
      <button onClick={form.mutators.setLast}>what I bought last time</button>
    </>
  )}
/>
  

正如下面@davnicwil所建议的，如果您需要从React应用程序外部与表单进行交互(例如，您正在使用微前端，您正在迁移应用程序，或者有一些第三方库存在)在 React 之外)，您可以使用 render 方法将表单对象(或其中的任何方法)保存到全局范围，并根据需要调用它们:

render={({ form, ...rest }) => {
  window.form = form;

  // ... rest of code
)}

// later anywhere else in app
window.form.mutators.setMax

Erik's post