Wie verwenden Sie Reagieren refs zu konzentrieren Redux Formularfeld?

Ich bin versucht, zu Reagieren refs zu konzentrieren Redux-Form Feld, wenn es Reittiere.

Wenn ich versuche this.refs.title.getRenderedComponent().focus() im componentDidMount ist, wird ein Fehler geworfen zu sagen:

edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined

Wenn ich Konsole.melden Sie diese.refs, ist es meist ein leeres Objekt, und manchmal erkennt 'Titel' als ref, aber es ist nicht verlässlich.

Bin ich mit refs falsch? Mein code ist unten als Referenz. 

componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

...

 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />
  • Das ist seltsam, dein code sieht gut aus, zeig bitte die gesamte Bauteil-code
  • haben Sie das gelöst?
  • Nein, nie gelöst, leider.
  • Ich habe so etwas ähnlich wie diese Arbeit, wenn die Komponente-Typ ist ein einfacher Typ wie input. Benutzerdefinierte Komponenten wird der Ertrag refs, aber Sie sind nicht von DOM-Elementen, die support-Anrufe wie focus(). Stattdessen werden Sie Reagieren Elemente.
InformationsquelleAutor Trey Granderson | 2017-02-25
  1. 7

    Bitte versuchen Sie die Einstellung ref mit callback-Funktion:

    ref={(input) => { this.title = input; }}

    und dann verwenden Sie diese, um zugrunde liegende DOM-Knoten:

    ReactDOM.findDOMNode(this.title).focus();

    wenn der DOM-input-element gewickelt ist, in einem anderen element:

    ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()

    Entsprechend zu Reagieren docs mit refs mit einer Zeichenkette, die einige Probleme haben. Bitte überprüfen Sie docs für mehr details.

    InformationsquelleAutor Bartek Fryzowicz
  2. 0

    Ich benutze redux-form und Material UI und hatte das folgende zu tun. MaterialCheckboxField und MaterialTextField sind benutzerdefinierte Komponenten in mein Projekt Umhüllung material-ui/{Checkbox,TextField}.

    Konvertierte ich MaterialTextField zu einem Klasse Komponente (gemäß dem Reagieren docs).

    Können Sie nicht die ref Attribut auf Funktion Komponenten, weil Sie nicht über Instanzen.

    import { findDOMNode } from "react-dom";

    Bereich Einstellung von Fokus (innerhalb der render() - Methode):

    <Field
  component={MaterialCheckboxField}
  label="Checkbox"
  name="..."
  onClick={event => {
    if (!event.target.checked) return;
    //focus() field after grace period
    //oddity of Material UI, does not work without
    window.setTimeout(() => this.textField.focus(), 150);
  }}
/>

    Material-UI-spezifische

    Anregung zu ermöglichen, eine Nachfrist mit setTimeout() aus diese Frage ALSO. Betrachten @Lukas' Kommentar:

    "Dieser code werfen kann. Was noch besser wäre, ist das speichern setTimeout() zurückgegebene ID der Komponente und auf
    componentWillUnmount() prüfen, ob der timeout ist immer noch da und klar
    wenn es so"

    Dem Feld, das den Fokus erhalten (innerhalb der render() - Methode):

    <Field
  component={MaterialTextField}
  label="Text field"
  name="..."
  ref={ref => {
    const node = findDOMNode(ref);
    if (node) {
      //Material UI wraps input element, 
      //use querySelector() to obtain reference to it
      //if not using MUI, querySelector() likely not needed
      this.textField = node.querySelector("input");
    }
  }}
  withRef
/>

    Hinweis

    Ich bin mit Material UI 0.x, nicht sicher, ob das ist, warum
    React.CreateRef() für mich nicht funktioniert (die empfohlene Vorgehensweise
    da Reagieren 16.3).

    • Ich habe versucht, Ihre Lösung, Es funktioniert aber mit, dass ich nicht in der Lage, zur nächsten textbox es fest auf dem einzigen Eingabefeld. bitte helfen Sie mir.
    • const node = findDOMNode(refs); if (node) { node.focus() }
    InformationsquelleAutor Greg K
Schreibe einen Kommentar