35

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

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

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

在查看了我认为最相关的两个示例（加载和初始化值和计算字段）之后，我仍然无法在不变得太笨拙的情况下弄清楚这一点。

我们如何从用户的操作（例如单击按钮）中设置字段的值？

4

2 回答 2

51

这可以通过向组件提供一个包含必要修改器的mutators对象来实现Form，这些修改器将可供您的组件使用：

<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

埃里克的帖子

于 2018-02-21T11:50:51.933 回答
23

接受的答案很好，让我找到了我的解决方案，但如果有人像我一样来到这里寻找一种从 React 应用程序外部修改字段值的方法，您可以通过创建一个完全通用的 mutator 来设置任何字段到任何值，并以如下形式获得对绑定突变器的全局引用

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

以上适用于v5.0.0及更高版本。在早期版本中，API 略有不同。而不是 using form.mutators，而是使用渲染功能的顶级mutators道具，即render={({ mutators, ... }

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

于 2019-04-27T14:45:31.757 回答