wake-up-neo.com

So setzen / ändern Sie den Feldwert in einer externen Benutzeraktion ???? React Final Form

Es gibt viele Situationen, in denen wir den Wert eines bestimmten Feldes in einem Formular festlegen möchten, um dem Benutzer zu helfen.

Beispielsweise kann ein Online-Obstladen Benutzer fragen, wie viele Äpfel sie kaufen möchten. Um den Benutzern zu helfen, könnten wir 3 Schaltflächen haben, wie z

  • "minimum" - legt den Feldwert auf die Mindestmenge fest, die das Geschäft verkaufen kann
  • "Maximum" - ebenso, aber für max
  • "Was ich zuletzt gekauft habe" - Stellt den Feldwert auf die Anzahl der Äpfel ein, die der Benutzer zuletzt gekauft hat

Nachdem ich mir die beiden wichtigsten Beispiele angesehen habe ( Werte laden und initialisieren und Berechnete Felder ), kann ich diese immer noch nicht herausfinden, ohne zu hackig zu werden.

Wie können wir den Wert eines Feldes aus der Aktion eines Benutzers (wie z Klicken Sie auf eine Schaltfläche)?

17
aryzing

Erik hat einen wundervollen Beitrag über Mutatoren , der mich dazu inspirierte, die Lösung zu finden, nach der ich gesucht habe:

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

Die akzeptierte Antwort ist großartig und hat mich zu meiner Lösung geführt, aber für den Fall, dass jemand hierher kommt, habe ich nach einem Weg gesucht, um Feldwerte von außerhalb der React application zu ändern = Sie können dies tun, indem Sie einen vollständig generischen Mutator erstellen, der ein Feld auf einen beliebigen Wert setzt, und einen globalen Verweis auf den gebundenen Mutator in der entsprechenden Form erhalten

<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')

Haftungsausschluss: Das obige Muster sollte nicht verwendet werden, es sei denn, dies ist für ganz bestimmte Anwendungsfälle unbedingt erforderlich. Ich benutze es zum Beispiel, um das Ausfüllen von Feldern aus Code zu automatisieren, der muss außerhalb meiner React app.) Liegt Anwendungscode. Aber wenn Sie es tun müssen, funktioniert es großartig!

8
davnicwil