Как установить/изменить значение поля из внешнего пользовательского действия ? Изменить окончательную форму

Есть много ситуаций, в которых мы могли бы установить значение определенного поля в форме, чтобы выручить пользователя.

Например, интернет-магазин фруктов может спросить пользователей, сколько яблок они хотят купить. Чтобы помочь пользователям, мы могли бы иметь 3 кнопки, такие как

"минимальный" - устанавливает значение поля на минимальное количество, которое магазин может реально продать
"максимум" - то же самое, но для максимума
"То, что я купил в последний раз" - устанавливает значение поля для количества яблок, которые пользователь купил в последний раз

После того, как я рассмотрел два наиболее важных примера (Загрузка и Инициализация Значений и Вычисляемые Поля), я все еще не могу понять это, не становясь слишком хакерским.

Как мы можем установить значение поля из действия пользователя (например, нажав кнопку)?

Ответ 1

У Эрика есть замечательный пост о мутаторах, который вдохновил меня найти решение, которое я искал:

<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>
    </>
  )}
/>

Ответ 2

Я не использую окончательную форму, но, кажется, вы просто должны передать значение в data состоянии компонента, как это:

setUsernameValue = () => {
    this.setState({ data: { ...this.state.data, username: 'RandomName' } })
}

См. Этот пример в codeandbox

Изменение: на самом деле это работает только для установки начального состояния формы, вы должны увидеть этот мутатор, чтобы изменить данные после начального состояния.

Ответ 3

Принятый ответ хорош и привел меня к моему решению, но в случае, если кто-то придет сюда, как я искал способ изменить значения полей извне приложения 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.}_{Вы не должны делать это для реального кода приложения.}_{Но если вам нужно это сделать, это прекрасно работает!}