Die Speicherung von Daten Reagieren

Ich bin tatsächlich neu zu Reagieren, und kann nicht wählen, was ist der beste Weg, um Daten zu speichern in einer situation wie dieser:
Ich habe ein Formular mit einigen Eingängen, und ich brauche, um zu tun einige Aktionen, die mit allen Daten diese Eingänge auf „Absenden“.
Alle Eingaben werden gespeichert in einer Komponente.
So, ich brauchen, um alle Daten nur auf „Absenden“. Und jetzt versuche ich zu wählen, der beste Weg, um diese Daten speichern. Ich sehe 2 Möglichkeiten:

  • Speicherung von Daten in den Staat. Aber wie Reagieren Docs beschreibt:

    „Nur Daten, die dargestellt werden muss kann store in den Staat.“

    Aber ich brauche nicht diese Daten zu Rendern, ich muss arbeiten mit dieser nur auf „Absenden“.

  • Speichern als Klassenvariablen. Es sieht gut aus für mich, denn wenn ich
    mit Stand, muss ich anrufen setState(), die trigger-Rendern(was ich
    nicht brauchen), oder diese.Zustand.Daten = ….Aber Reagieren Docs sagt, dass:

    „Können Sie den Status ändern nur direkt in den Konstruktor.“

So, welche dieser Möglichkeiten sind besser und warum?

  • Sie können auch Referenzen
  • Wie „können Sie den Status ändern nur direkt in den Konstruktor.“ blockieren Sie das speichern von Daten in der Klasse, die Variablen/Objekt-Eigenschaften?
  • Vielleicht möchten Sie sich in redux für die Staatliche Verwaltung
  • Es war argument nicht verwenden, Staat, keine Klassen-Variablen, ich sehe Klasse Variablen wie richtig Weg hier, aber ich bin mir nicht sicher
  • ‘Direkt ändern des Status“ bezieht sich hier nicht setState z.B. direkt zuweisen Staat. Einen Grund zu halten, bilden Daten, die in Staat, die anderen Formular-Elemente können müssen Stand-Daten, und mein Bedürfnis, re-Rendern. Sie können Steuern, die Notwendigkeit, re-Rendern über shouldComponentRender oder was auch immer seine genannt. Halten Sie alle an einem Ort ist ziemlich handlich sind und entfällt die Notwendigkeit, ziehen Sie Sie von mehreren Standorten aus—aber auf lange Sicht ist es eine Frage der Bedürfnisse.



3 Replies
  1. 3

    Ich glaube, du bist overthinking es nur mit dem stick gesteuert-Komponenten und verwalten Sie Ihre Daten in das Formular durch den Staat.

    Jedoch, wenn Sie wirklich nicht wollen, um mit kontrollierten Komponenten, weil Sie nicht wollen, dass die render-Methode aufgerufen werden, dann müssen Sie nicht haben, um.

    Dies ist, weil die Elemente bilden, arbeiten ein wenig anders als andere DOM-Elemente Reagieren, weil im HTML -, Formular-Elemente, wie <input>, <textarea>, und <select> natürlich Ihren eigenen Zustand aufrechterhalten und aktualisieren, basierend auf Benutzereingaben. Siehe amtliche Formulare docs.

    Reagieren können und nicht nehmen Sie. Dies bedeutet, dass Sie kann machen Verwendung von Formularen der gleichen Weise würden Sie mit vanilla JS.

    Erwähnenswert ist auch, dass in der Reagieren Welt-auf diese Weise verlassen Daten werden rein behandelt der DOM eher als Umgang mit einem React-Komponente ist bekannt als Unkontrollierte Komponente.

    Umsetzung

    Soweit, wie sich dies in der Praxis, kann ich mir zwei Möglichkeiten, dass Sie können dies tun, wäre man mit refs:

    handleSubmit = (e) => {
      e.preventDefault();
      console.log(this.input.value); //whatever you typed into the input
    }
    
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="name" ref={input => this.input = input} />
          <input type="submit" value="submit" />
        </form>
      );
    }

    Andere Möglichkeit wäre durch eine event Objekt:

    handleSubmit = (e) => {
      e.preventDefault();
      console.log(e.target.name.value); //whatever you typed into the input
    }
    
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="name" />
          <input type="submit" value="submit" />
        </form>
      );
    }
    • ich rly wie die 2. Methode, thx für die Antwort
  2. 0

    Für die Speicherung von Floskeln ich würde auf jeden Fall wählen Sie zum speichern der Daten in dem Zustand, wenn man sich die Reagieren in form der offiziellen Dokumentation Sie erklären, was denke ich der Fall ist.

    Den standard, den Sie sehen, die meisten, soweit ich weiß, ist dies:

    class Form extends Component {
        constructor (props) {
        super(props)
        this.state = {
          name: '',
          surname: ''
        }
      }
    
      handleSubmit = (e) => {
        e.preventDefault();
        //send data from the actual state
      }
    
      handleChange = (e) => {
        this.setState({[e.target.name]: e.target.value})
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <input type="text" name="name" onChange={this.handleChange} />
            <input type="text" name="surname" onChange={this.handleChange} />
            <input type="submit" value="submit" />
          </form>
        )
      }
    }

    Werfen Sie einen Blick auf diese JSFiddle ich für Euch getan hat! Und überprüfen Sie Ihre Konsole, wenn das senden der Eingang.

  3. 0

    Möchten Sie vielleicht zu prüfen, aus redux-form. Sein großes Werkzeug für die Formular-Validierung!

    Sein ein bisschen eine Herausforderung, um begonnen zu erhalten, aber wirklich glatt, sobald Sie das hängen davon bekommen.

    Auch die docs sind Super.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.