Question

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

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

＆＃34;最小＆＃34; - 将字段值设置为商店可以销售的最小数量
＆＃34;最大＆＃34; - 同上，但是最多
＆＃34;我上次购买的东西＆＃34; - 将字段值设置为用户上次购买的苹果数量

在完成了我认为最相关的两个例子（Loading and Initializing Values和Calculated Fields）之后，我仍然无法解决这个问题而不会太过苛刻。

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

Answer 1

Erik有一个很棒的post on 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应用程序外部修改字段值，则可以做到通过制作一个完全通用的更改器，将任何字段设置为任何值，并以如下形式获取对绑定更改器的全局引用

<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应用程序外部的。您不应为实际的应用程序代码执行此操作。但是，如果您确实需要这样做，那么效果很好！}

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

2 个答案: