Material-ui: Arbeiten mit Reaktionshaken-Form

Ich habe das Tag waiting for users upvotes hinzugefügt. Ich schließe das Thema, da wir nicht sicher sind, ob die Leute nach einer solchen Unterstützung suchen. Bitte stimmen Sie diesem Thema also zu, wenn Sie es sind. Wir werden unsere Bemühungen basierend auf der Anzahl der Upvotes priorisieren.

https://npm-stat.com/charts.html?package=formik&package=react-hook-form&package=react-final-form

dringend benötigt :pray::pray::pray: irgendeine Problemumgehung?

dringend benötigt!

Definitiv benötigt.

Irgendeine Idee, was die Lösung wäre?

Ich bin mir bei etwas Bestimmtem nicht sicher, aber ich weiß, dass ich angefangen habe, beide Bibliotheken zu verwenden, und ich würde mir wirklich eine engere Integration zwischen den beiden wünschen. React Hook Form und Material UI sind einfach großartig zusammen. Ihre Unterstützung für TypeScript ist auch nett.

Hey, @oliviertassinari, danke für den Blick darauf. Anscheinend funktioniert MUI TextField jetzt besser mit der API der nativen Eingabe! Das ist wirklich schön. Früher hatten wir das Platzhalter-Text-Overlay über dem Text, wenn Sie e.target.value = 'xxx' aufrufen. 👍

https://codesandbox.io/s/react-hook-form-conditional-fields-delete-1frsm
Im obigen Beispiel wurde <Switch /> nicht zurückgesetzt, nachdem die reset API aufgerufen wurde.

Es wäre wirklich schön, wenn wir alle formularbezogenen Komponenten haben könnten, um die native Formulareingabe-API zu unterstützen (Wert über die Referenz der Eingabe setzen und zurücksetzen). etwas zu beachten (vielleicht bis die Lib beliebter wird ❤️)

wieder schätze ich Ihre Zeit und Mühe, sich mit diesem Problem zu befassen (ein RIESIGE Open-Source-Projekt zu pflegen, wie MUI ist verrückt für mich und Sie leisten einen großartigen Job für die React-Community). Lassen Sie mich darüber hinaus wissen, ob ich an meiner Seite arbeiten kann, um auch mit MUI zu arbeiten.

Danke schön
Rechnung

@bluebill1049 Danke fürs Anschauen. Die Bibliothek scheint eine gute Zugkraft zu bekommen, aber sie ist immer noch weit hinter formik zurück. Ist das Zurücksetzen des Schalters das einzige Problem, das wir haben?

danke, @oliviertassinari für die Wiedereröffnung und Untersuchung dieses Problems. 🙏 ja, du hast recht react-hook-form ist noch ein neuer Junge in der Stadt und du hast keine Schauspielerei, wenn du noch etwas warten möchtest, ob mehr Benutzer react-hook-form adoptieren, was Ich denke, es ist völlig vernünftig (auch wenn ich in meinem Herzen unbedingt möchte, dass es mit MUI funktioniert, hahaha war egoistisch😼). In der Zwischenzeit werde ich eine Tabelle mit Eingaben erstellen, die mit react-hook-form out

Wenn die Dinge mit dem React-Hook-Formular und der wachsenden Nutzung gut funktionieren, können wir vielleicht erwägen, mit der nativen Eingabe-API zu arbeiten (was die Reaction-Hook-Form hinter den Kulissen verwendet), wäre es großartig, input . select , radio und checkbox arbeiten, da diese die primäre Verwendung für Formulare sind.

FYI @oliviertassinari Ich arbeite an etwas, um die Lücke zwischen MUI und https://github.com/react-hook-form/react-hook-form-input

Auch Probleme beim Zurücksetzen und Laden von Standarddaten. Bitte schauen Sie sich dieses Problem an. Oder bieten Sie zumindest einen Workaround für den Moment an.

Hey @raikusy bitte schau dir den Link an den ich oben gepostet habe, ich denke er wird dir weiterhelfen. Auf lange Sicht wäre es großartig für die MUI-Komponente, die native Form-API "Reset" zu unterstützen und den Wert über die Komponente "Ref" zu aktualisieren, aber dies ist ein hoher Arbeitspreis, von dem ich sicher bin, dass MUI viele Funktionen und Ideen hat die wichtiger sind. So wie wir es oben besprochen haben, bis die Hook-Form der Reaktion zur Mainstream-Lib wird oder populär wird, wird MUI nach Lösungen suchen. Hoffe, diese machen Sinn :) Danke, dass du auch die Reaktionshakenform verwendet hast ❤️🤩🤟🏻

Zu Ihrer Information, dass die Wrapper-Komponente immer noch ermöglicht, dass Ihr Formular 0 erneut rendert. Da die Aktualisierung des Eingabestatus innerhalb der Wrapper-Komponente isoliert ist

Danke @bluebill1049 das sieht toll aus. Ich habe eine Bedingung, bei der Formularfelder einen Standardwert haben, wenn Daten von Requisiten übergeben werden. Funktioniert die TextField-Komponente auch mit der obigen Lösung? Außerdem suchte ich nach einem besseren Beispiel für die Übergabe von Standardwerten mit Requisiten an das Formular. Die Requisiten können manchmal von einem API-Aufruf stammen, nachdem das Formular bereits gemountet wurde.

@raikusy Sie sollten in der Lage sein, die reset/setValue-API mit der Wrapper-Komponente zu verwenden.
zurücksetzen: für das gesamte Formular -> https://react-hook-form.com/api#setValue
setValue: für Einzelpersonen -> https://react-hook-form.com/api#reset

Ich kann <Slider /> dazu bringen, mit RHF zu arbeiten.

Verwenden Sie es wie:

      <FormControl fullWidth component="fieldset" margin="normal">
        <FormLabel component="legend">Palavras</FormLabel>
        <RHFInput
          as={<Slider min={100} max={1200} step={100} valueLabelDisplay="auto" marks={marks} />}
          type="input"
          name="words"
          register={register}
          setValue={setValue}
        />
      </FormControl>

Ich bekomme folgenden Fehler:

Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (created by SetupAccountForm)
    in Unknown (created by SetupAccountForm)
    in fieldset (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SetupAccountForm)
    in form (created by SetupAccountForm)
    in SetupAccountForm (created by SetupAccountPage)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by SetupAccountPage)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by SetupAccountPage)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Layout)
    in Layout (created by SetupAccountPage)
    in SetupAccountPage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App (created by Root)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by Root)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by Root)
    in Provider (created by Root)
    in Root Button.js:233:15

@hbarcelos sieht so aus, als ob der Slider keine useEffect

Vielen Dank @bluebill1049

Am Ende habe ich so etwas gemacht:

import React, { useEffect, useCallback, useState, useMemo } from 'react';
import t from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles(theme => ({
  sliderWrapper: {},
  sliderLabel: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(0.5),
    color: theme.palette.primary.main,
  },
}));

function CustomSlider({
  register,
  unregister,
  setValue,
  name,
  rules,
  defaultValue,
  valueLabelAs,
  formatLabel,
  ...rest
}) {
  const cl = useStyles();

  const [currentValue, setCurrentValue] = useState(defaultValue);

  useEffect(() => {
    register({ name });
    return () => unregister(name);
  }, [defaultValue, name, register, setValue, unregister]);

  const valueLabel = useMemo(() => {
    if (!valueLabelAs) {
      return null;
    }

    return React.cloneElement(
      valueLabelAs,
      { className: clsx(valueLabelAs.props.className, cl.sliderLabel) },
      formatLabel(currentValue)
    );
  }, [cl.sliderLabel, currentValue, formatLabel, valueLabelAs]);

  const handleChange = useCallback(
    (_, value) => {
      setValue(name, value);
      setCurrentValue(value);
    },
    [name, setValue]
  );

  return (
    <React.Fragment>
      {valueLabel}
      <Box className={cl.sliderWrapper}>
        <Slider {...rest} onChange={handleChange} defaultValue={defaultValue} />
      </Box>
    </React.Fragment>
  );
}

CustomSlider.defaultProps = {
  rules: {},
  defaultValue: '',
  valueLabelAs: null,
  formatLabel: v => v,
};

CustomSlider.propTypes = {
  register: t.func.isRequired,
  unregister: t.func.isRequired,
  setValue: t.func.isRequired,
  name: t.string.isRequired,
  rules: t.object,
  defaultValue: t.oneOfType([t.number, t.string]),
  valueLabelAs: t.node,
  formatLabel: t.func,
};

export default CustomSlider;

Es funktioniert wie erwartet.

Das habe ich auch dringend gebraucht

Auf lange Sicht wäre es großartig für die MUI-Komponente, die native Form-API "Reset" zu unterstützen und den Wert über die Komponente "Ref" zu aktualisieren.

@bluebill1049 Ist dies nicht ein Problem mit React oder React-Hook-Form selbst? Wie soll ein Entwickler mit einer Reak-Hook-Form auf eine Eingangszustandsänderung "reagieren"?
Nehmen wir an, ich bin ein React-Entwickler, der eine benutzerdefinierte Eingabe erstellt, und möchte das Element anders gestalten, wenn es gefüllt/leer ist. Wie soll ich das implementieren? Es scheint, dass nie ein Änderungsereignis ausgelöst wird.

Haben Sie darüber nachgedacht, ein Änderungsereignis auszulösen, wenn Ihre Bibliothek einen Eingabewert "außerhalb" des deklarativen Modells von React ändert? Wie in @test-library/react?

Dies würde die Unterstützung von Material-UI-Komponenten ermöglichen, die auf native Eingabeelemente angewiesen sind, für die anderen, wie den Slider, wäre weiterhin ein benutzerdefinierter Wrapper erforderlich. Der Schieberegler hat eine Werteigenschaft, aber die Signatur von onChange unterscheidet sich von einer nativen Eingabe. Ich denke, es wäre großartig, eine Integrationsbibliothek zu sehen, wie wir es für die anderen Formularbibliotheken haben: #15585.

Ich habe mich gefragt, warum diese Ausgabe so viele positive Stimmen bekommen hat, ich glaube, ich habe es herausgefunden 🙃:

https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolComponents

hey @oliviertassinari , danke, dass du dir dieses Thema noch einmal genauer angeschaut hast 👍

Nehmen wir an, ich bin ein React-Entwickler, der eine benutzerdefinierte Eingabe erstellt, und möchte das Element anders gestalten, wenn es gefüllt/leer ist. Wie soll ich das implementieren? Es scheint, dass nie ein Änderungsereignis ausgelöst wird.

Ich würde CSS-Selektor für Lösungen in meinem eigenen Projekt suchen, das native Eingaben verwendet, zB: Wählen Sie ein Element hat einen leeren Wert und zeigen Sie einen Stil an. Als Alternative würde ich die React-Hook-Form watch API verwenden, um einen leeren Wert zu erkennen und als prop (mit meiner umschlossenen Eingabekomponente) weiterzugeben.

Haben Sie darüber nachgedacht, ein Änderungsereignis auszulösen, wenn Ihre Bibliothek einen Eingabewert "außerhalb" des deklarativen Modells von React ändert? Wie in @test-library/react?

Ja, wir machen es so ziemlich unter react-hook-form-input . 😄

Ich glaube an unkontrollierte Komponenten für Bauformen nach vielen Jahren der Bauformkontrolle, das macht die Dinge wirklich viel einfacher. Es löst vielleicht nicht jeden Grenzfall (wenn Sie bei Facebook LOL arbeiten), aber es erleichtert sicherlich mein Arbeitsleben und andere um mich herum, wenn es um das Erstellen von Formularen geht. HTML-Eingaben sind selbst zustandsbehaftet und ich würde sie gerne in diese Bibliothek aufnehmen (nicht sagen, dass es richtig oder falsch ist, sondern eine alternative Lösung).

Ich liebe es so sehr, eine React-Anwendung zu erstellen, und deshalb baue ich viele Pakete darum herum. Ich verstehe, dass React kontrollierte Komponenten umfasst. React-Hook-Form hindert Entwickler jedoch nicht daran, Formularkontrollen zu erstellen, da Sie immer noch benutzerdefinierte register bei useEffect .

Abschluss:

Ich denke, wir können dieses Problem schließen und ich werde den Link zu diesem Problem von meiner Website entfernen. Könnte ich diese Seite außerdem aktualisieren, um react-hook-form-input einzufügen?

https://material-ui.com/components/text-fields/#complementary -projects

Ja, wir machen es so ziemlich unter Reak-Hook-Form-Input.

@bluebill1049 Es klingt wie der entgegengesetzte Ansatz zu meinem Vorschlag. Ich verstehe folgendes:

• Reaktionshaken-Form:
  
  
  
  1. Es verfolgt die Eingabe-DOM-Knoten. Wenn der Wert geändert werden muss, wird input.value = 'x' . Dies ist für React problematisch, da es keine Möglichkeit hat zu wissen, dass sich der Eingabewert geändert hat. Beispielsweise wird kein Änderungsereignis ausgelöst .
  
  
  2. Da React-Hook-Form auf Änderungen des Eingabewerts warten muss, setzt es einen "input"-Ereignis-Listener für die Eingabe . Dies ist für Ihre Bibliothek problematisch, da Änderungen durch React kein Ereignis auslösen, wenn sich der Wert von einer kontrollierten Eingabe ändert .
  
  
• React-Hook-Form-Input: Die Bibliothek steuert die Eingabe, um die beiden vorherigen Einschränkungen von React-Hook-Form (i und ii) zu umgehen.

Angesichts der Tatsache, dass 1. es sehr unwahrscheinlich ist, dass React gut spielt, um den React-Hook-Form-Ansatz zu unterstützen, und 2. dass React-Hook-Form nicht außerhalb der Box mit kontrollierten und pseudo-unkontrollierten Eingaben funktioniert (diejenigen, die die Standardwert und diejenigen, die nur auf onChange hören), würde ich Folgendes vorschlagen:

1. React-Hook-Form patcht das kontrollierte und das pseudo-unkontrollierte Problem intern. Grundsätzlich müssen Sie i lösen ii. (siehe Lösungsvorschläge in den verlinkten Codes und Boxen: Versand + defineProperty).
2. Material-UI bittet die Community um Unterstützung, um bei Bedarf Adapter für Reak-Hook-Form bereitzustellen (bezogen auf #15585).
3. Wir schließen dieses Thema 👌

danke @oliviertassinari für die ausführliche Antwort. Ich werde mit Ihren Lösungsvorschlägen weitere Untersuchungen anstellen :)

Ich glaube, das meiste Problem, das Sie oben mit React erwähnt haben, ist, wenn Sie kontrollierte Komponenten wechseln, was der Teil ist, den ich verbessern möchte.

Nur um es klar auszudrücken:

• Um das Problem bei Änderung zu reproduzieren, gehen Sie zu https://codesandbox.io/s/heuristic-galileo-1wf8c und klicken Sie auf die Schaltfläche => fehlendes Protokoll. Gehen Sie nun zu https://codesandbox.io/s/silly-allen-72zz7 und sehen Sie, wie der Versandansatz das Problem löst.
• Um das Problem der Wertänderung zu reproduzieren, gehen Sie zu https://codesandbox.io/s/elastic-agnesi-osuuy und klicken Sie auf die Schaltfläche => fehlendes Protokoll. Gehen Sie nun zu https://codesandbox.io/s/sparkling-rain-3rebh und sehen Sie, wie der Object.defiendProperty-Ansatz das Problem löst.

Ich bin mir also ziemlich sicher, dass Sie das in Reak-Hook-Form lösen können. Wir würden es begrüßen, wenn Sie diese Fixes ausprobieren/einsetzen und die Schuld auf unserer Seite aus Ihrer Dokumentation entfernen könnten 😛.

Diese Änderungen sollten wirklich bei der Traktion Ihrer Formularbibliothek helfen, ich hoffe, Sie werden es schätzen :D.

Ich glaube, das meiste Problem, das Sie oben mit React erwähnt haben, ist, wenn Sie von unkontrollierten zu kontrollierten oder kontrollierten Komponenten wechseln, was der Teil ist, den ich verbessern möchte.

React warnt, wenn der Benutzer zwischen unkontrolliert und kontrolliert wechselt. Ich verstehe deinen Punkt nicht.

Ich bin mir also ziemlich sicher, dass Sie das in Reak-Hook-Form lösen können. Wir würden es begrüßen, wenn Sie diese Fixes ausprobieren/einsetzen und die Schuld auf unserer Seite aus Ihrer Dokumentation entfernen könnten 😛.

AUF KEINEN FALL mache ich MUI die Schuld haha, ich liebe MUI (mit meinem kleinen Stern ⭐️). Wie Sie wissen, ist Reaction-Hook-Form ein neuer Junge in der Stadt, ich habe versucht, etwas Aufmerksamkeit oder Schwung auf das spezielle Thema zu bekommen. Ich entschuldige mich, wenn Sie so finden (Schuld). Nochmals vielen Dank für Ihre Hilfe und Untersuchung.

(Keine Schuld)

Ich glaube, das meiste Problem, das Sie oben mit React erwähnt haben, ist, wenn Sie von unkontrollierten zu kontrollierten oder kontrollierten Komponenten wechseln, was der Teil ist, den ich verbessern möchte.

React warnt, wenn der Benutzer zwischen unkontrolliert und kontrolliert wechselt. Ich verstehe deinen Punkt nicht.

Entschuldigung, ich meinte kontrollierte Komponente :) Mein Kommentar wurde behoben

@bluebill1049 Genial :)

vielen Dank, @oliviertassinari (du bist sehr nett)

Beachten Sie, dass Material-UI die gleichen vorgeschlagenen Korrekturen anwenden könnte, aber ich denke nicht, dass wir das tun sollten, es hätte zwei Nachteile: 1. Es würde nur mit Material-UI funktionieren, der gleiche Aufwand müsste immer und immer wieder durchgeführt werden. 2. das Eigentum an diesen "Hacks" sollte in React-Hook-Form bleiben, da es aus dem Kompromiss der Bibliothek stammt (Umgehung der idiomatischen React-API).

Hey Leute, falls jemand in dieses Problem einsteigt. (Wir arbeiten schon seit einiger Zeit heimlich daran 😓)

Wir arbeiten an der nächsten Hauptversion für RHF, die einige Updates zur Lebensqualität enthält, insbesondere rund um die kontrollierte Komponente. Wir werden eine bessere Unterstützung für die UI-Bibliothek haben. Der folgende Code löst setValue und defaultValue für die kontrollierte UI-Bibliothek auf, während die minimale erneute Darstellung auf App-/Formularebene beibehalten wird. Die erneute Darstellung wird auf der Ebene der Eingabekomponente isoliert.

Das Folgende ist die Syntax, wenn Sie V4 von RHF verwenden.

import TextField from '@material-ui/core/TextField';

const { control } = useForm();

<Controller as={TextField} control={control} name="firstName" rules={{ required: true }} />

Brauchen Sie Hilfe.
Ich habe ein Problem mit dem Textfeld des Materials (wahrscheinlich auch mit anderen Mui).
Wenn das Textfeld leer ist, ist der erste Schlüsselspeicher langsam, das gleiche gilt, wenn Sie den Wert auf leer ändern.
Aus irgendeinem Grund wird das gesamte Formular neu gerendert.

SCHNELLER HINWEIS : Ich tippe schnell und ohne Verzögerung. sie verzögern sich aus dem oben genannten Grund.

Hallo Leute, dieses Problem bleibt bestehen, auch wenn ich den Controller von React-Hook-Form verwende :(
Kann dieses Thema erneut geöffnet werden? Oder mache ich es falsch?

Beispiel: https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-kqwq0?file=/index.js

Bearbeiten: Eine Lösung, die ich verwende, ist die InputLabelProps={isEdition && { shrink: isEdition }}
wobei isEdition ein Flag ist, das ich im Bearbeitungsbildschirm verwende.

@Luccasoli plz siehe das Dokument: https://react-hook-form.com/api#Controller

Es gibt ein Beispiel mit MUI-Beispielen: https://codesandbox.io/s/react-hook-form-controller-079xx

Sorry @bluebill1049 , aber ich habe in diesem Beispiel keine ähnliche Situation gefunden, und in der Dokumentation konnte ich keine Requisite finden, die dieses Problem richtig lösen könnte:(

@Luccasoli schau mal bei defaultValue

Ich habe es versucht:

• Ich habe versucht, die defaultValues ​​in useForm() in einen Zustandswert umzuwandeln und diesen Zustand in useEffect() zu setzen.
• Ich habe versucht, die gleiche Idee zu verwenden, aber in defaultValue prop direkt jeder Controller

In beiden Fällen erkennt das textField nicht, dass die Eingabe ausgefüllt ist, und beschriftet die Eingabe

https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-ijxfp

Ja, aber es ist seltsam, einen solchen Standardwert beizubehalten. Ich versuche immer, mit einem leeren Zeichenfolgenwert zu beginnen, um dem Benutzer keinen seltsamen Wert anzuzeigen.

Ich könnte sogar einen "Loading" defaultValue anzeigen, aber der leere Anfangswert scheint immer noch interessanter zu sein, halten Sie das für möglich?

Edit: ja, funktioniert auch mit leeren Strings ... hahaha, danke, ich habe geschworen, dass ich das schon einmal probiert habe, aber es scheint so.

@bluebill1049 Ich habe Ihre Demo optimiert, um das Problem zu zeigen, das ich sehe, und hoffentlich haben Sie eine gute Lösung.
https://codesandbox.io/s/react-hook-form-controller-n196b?file=/src/index.js
Der Versuch, ein Kontrollkästchen zu validieren, wird aktiviert, bevor eine Schaltfläche aktiviert wird. Alle anderen Felder, die ich verwendet habe, funktionieren wie erwartet, mit Ausnahme des Kontrollkästchens.

Ich fand diese Sandbox wirklich sehr nützlich für Material UI - Es gibt Beispiele für Slider, Select und ein paar andere.
https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js