如何设置/更改外部用户操作的字段值React Final Form

Question

在许多情况下,我们可能希望在表单中设置特定字段的值以帮助用户.

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

• "最小" - 将字段值设置为商店可以销售的最小数量
• "最大" - 同上,但最大
• "我上次购买的东西" - 将字段值设置为用户上次购买的苹果数量

在回顾了我认为最相关的两个例子(加载和初始化值和计算字段)之后,我仍然无法弄清楚这一点而不会太过苛刻.

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

Answer 1

Erik有一篇关于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={({ mutators, ...rest }) => (
    <>
      <button onClick={mutators.setMin}>minimum apples</button>
      <button onClick={mutators.setMax}>maximum apples</button>
      <button onClick={mutators.setLast}>what I bought last time</button>
    </>
  )}
/>

Answer 2

公认的答案很不错，这使我找到了解决方案，但是如果有人像我一样在这里寻找从React应用程序外部修改字段值的方法，则可以通过制作一个可以设置任何字段的完全通用的mutator来实现。取任何值，并以如下形式获取对绑定的变体的全局引用

<Form
  mutators={{
    // expect (field, value) args from the mutator
    setValue: ([field, value], state, { changeValue }) => {
      changeValue(state, field, () => value)
    }
  }}
  render={({ mutators, ...rest }) => {
    // put the reference on a window variable of your choice here
    if (!window.setFormValue) window.setFormValue = mutators.setValue

    return (
      <>
        <Field name="field1">...</Field>
        <Field name="field2">...</Field>
        ...
      </>
    )
  }}
/>

// somewhere else, outside of the React application

window.setFormValue('field1', 'value1')
window.setFormValue('field2', 'value2')

_{免责声明：对于非常特殊的用例，除非绝对必要，否则不应使用上述模式。例如，我使用它来自动填充必须在我的React应用程序外部的代码中的字段。您不应为实际的应用程序代码执行此操作。但是，如果您确实需要这样做，那么效果很好！}

Answer 3

这对我有用。不必预设突变器，但 MinButton 必须是 Form 的后代组件。

const MinButton = () => {
    const { change } = useForm();
    return <Button onClick={() => change('num_apples', 1)}/>;
};