Wie validiere ich Eingabewerte mit React.JS richtig?

Question

Ich habe ein einfaches Formular.Alle Komponenten und der Status werden in der Seitenkomponente gespeichert.Es gibt 2 Anzeigeköpfe und 3 Eingabefelder.Die erste Eingabe soll Text sein, die zweite und dritte Eingabe sollen Ints sein.Wenn der Benutzer den falschen Datentyp eingibt, möchte ich, dass neben dem Eingabefeld eine Fehlermeldung angezeigt wird.Meine Fragen beziehen sich auf Best Practices in React.JS

Wer entscheidet, ob der Wert gültig ist?Ich nehme an, dass die einzige Aufgabe des Eingabefelds darin besteht, den Wert an die Komponente zurückzuleiten, die den Status hält. Bedeutet das also, dass nur Page feststellen kann, ob ein Wert gültig ist?

Wie soll das Popup dann erscheinen?Sollte Page ein neues boolesches Statuselement auslösen müssen, das über perp übergeben wird und Adaptive_Input anweist, die Fehlermeldung anzuzeigen?

JSFiddle

JS:

/**
 * @jsx React.DOM
 */
var Adaptive_Input = React.createClass({ 
    handle_change: function(){
        var new_text = this.refs.input.getDOMNode().value;
        this.props.on_Input_Change(new_text);
    },
    render: function(){
        return (
                <div className='adaptive_placeholder_input_container'>
                    <input 
                        className="adaptive_input"
                        type="text" 
                        required="required" 
                        onChange= {this.handle_change}
                        ref="input"
                    ></input>
                    <label
                        className="adaptive_placeholder"
                        alt={this.props.initial}
                        placeholder={this.props.focused}
                    ></label>
                </div>              
                );
    }
});

var Form = React.createClass({
    render: function(){
        return (
                <form>
                    <Adaptive_Input
                        initial={'Name Input'}
                        focused={'Name Input'}
                        on_Input_Change={this.props.handle_text_input}
                    />
                    <Adaptive_Input
                        initial={'Value 1'}
                        focused={'Value 1'}
                        on_Input_Change={this.props.handle_value_1_input}
                    />
                    <Adaptive_Input
                        initial={'Value 2'}
                        focused={'Value 2'}
                        on_Input_Change={this.props.handle_value_2_input}
                    />
                </form>
                );
    }
});

var Page = React.createClass({
    getInitialState: function(){
        return {
            Name : "No Name",
            Value_1 : '0',
            Value_2 : '0',
            Display_Value: '0'
        };
    },
    handle_text_input: function(new_text){
        this.setState({
                Name: new_text
            });
    },
    handle_value_1_input: function(new_value){
        console.log("===");
        var updated_display = parseInt(new_value) + parseInt(this.state.Value_2);
        updated_display = updated_display.toString();
        this.setState({
                Display_Value: updated_display 
            });
    },
    handle_value_2_input: function(new_value){
        var updated_display = parseInt(this.state.Value_1) + parseInt(new_value);
        updated_display = updated_display.toString();
        this.setState({
                Display_Value: updated_display
            });
    },
    render: function(){
        return(
                <div>
                    <h2>{this.state.Name}</h2>
                    <h2>Value 1 + Value 2 = {this.state.Display_Value}</h2>
                    <Form
                        handle_text_input={this.handle_text_input}
                        handle_value_1_input = {this.handle_value_1_input}
                        handle_value_2_input = {this.handle_value_2_input}
                    />
                </div>
        );
    }
});

React.renderComponent(<Page />, document.body);

Answer 1

Erster, hier ist ein Beispiel dafür, was ich unten erwähne: http://jsbin.com/rixido/2/Endit

So überprüfen Sie die Eingabewerte mit reag.js ordnungsgemäß?

Sie wollen jedoch. Reagieren Sie, um ein Datenmodell zu rendieren. Das Datenmodell sollte wissen, was gültig ist oder nicht. Sie können Backbone-Modelle, JSON-Daten verwenden oder alles, was Sie die Daten und den Fehlerzustand darstellen möchten.

genauer:

reagieren Sie in der Regel agnostisch auf Ihre Daten. Es ist für das Rendern und Umgang mit Ereignissen.

Die folgenden Regeln sind:

.
1. Elemente können ihren Zustand ändern.
2. Sie können die Requisiten nicht ändern.
3. Sie können einen Rückruf aufrufen, der die Requisiten der obersten Ebene wechselt.

Wie entscheiden Sie, ob etwas eine Stütze oder ein Staat sein sollte? Betrachten Sie dies: Wäre ein anderer Teil Ihrer App als das Textfeld, das wissen möchte, dass der eingegebene Wert schlecht ist? Wenn nein, machen Sie es zu einem Zustand. Wenn ja, sollte es eine Requisite sein.

Beispielsweise, wenn Sie eine separate Ansicht, um Render "wollten, haben Sie 2 Fehler auf dieser Seite." Dann müsste Ihr Fehler einem Toplevel-Datenmodell bekannt sein.

Wo sollte dieser Fehler live leben?
Wenn Ihre App Rendern von Backbone-Modellen (z. B.), hätte das Modell selbst eine validate () -Methode- und ValidateError-Eigenschaft, die Sie verwenden könnten. Sie könnten andere intelligente Objekte rendern, die dasselbe tun könnten. Reagieren Sie auch, versuchen Sie, Requisiten auf ein Minimum zu halten und den Rest der Daten zu erstellen. Wenn Sie also einen Validator hätten (z. B. https://github.com/flatiron/revalidator ), könnten Ihre Validierungen rinnen und irgendeine Komponente könnte Requisiten mit der passenden Validierung überprüfen, um zu sehen, ob es gültig ist.

es ist größtenteils an dir.

(ich bin persönlich mit Backbone-Modellen und rendern Sie sie in Reagieren. Ich habe eine Toplevel-Fehlermeldung, dass ich anzeige, ob ein Fehler überall ist, wodurch der Fehler beschreibt wird.)

Answer 2

Sie können npm install --save redux-form verwenden

Ich schreibe eine einfache E-Mail- und Senden von Schaltflächenform, die E-Mails validiert und Formular einreicht.Mit Redux-Formular FORMULE FORMULARS EVENT.PREVENTDEFAULT () auf HTML OnSubMit-Aktion.

generasacodicetagpre.

Answer 3

Ich habe diese Bibliothek , mit der Sie Ihre Formularelementkomponenten einschließen können, und lässtSie definieren Ihre Validatoren im Format: -

generasacodicetagpre.

Answer 4

Ihre jsfiddle funktioniert nicht mehr. Ich habe es behoben: http://jsfiddle.net/tkrotoff/bgc6e/40/ Verwenden von Reaktionen 16 und ES6-Klassen.

generasacodicetagpre.

und nun denselben Code, der dank dieser Bibliothek mit der Formulation bestätigt wurde /github.com/tkrotoff/react-form-with-constraints . => http://jsfiddle.net/tkrotoff/k4qa4Heg/

generasacodicetagpre.

Die vorgeschlagene Lösung hier ist hacken, da ich versucht habe, es in der Nähe des ursprünglichen JSFiddle zu halten. Für eine ordnungsgemäße Formularvalidierung mit Reaktionsform-mit-Constraints, Check https:// github.com/tkrotoff/react-form-with-constraint#Examples

Answer 5

Verwenden Sie onChange={this.handleChange.bind(this, "name") -Methode und value={this.state.fields["name"]} im Feld Eingangstext und unten, um das Span-Element erstellen, um den Fehler anzuzeigen, siehe das untenstehende Beispiel.

generasacodicetagpre.

Answer 6

Ich habe kürzlich eine Woche damit verbracht, viele Lösungen zu studieren, um meine Formulare in einer App zu bestätigen.Ich begann mit all dem starrsten starrten, aber ich konnte keinen finden, der, der, wie ich erwartet hatte, nicht zu finden.Nach wenigen Tagen wurde ich ziemlich frustriert, bis ich ein sehr neues und erstaunliches Plugin fand: https://github.com/kettanaito/react-Adcanced-form

.

Der Entwickler ist sehr ansprechend und seine Lösung, nach meiner Forschung, ist der Verdienst, der am meisten starrste Starrende aus meiner Perspektive zu werden.Ich hoffe, es könnte helfen und Sie werden es schätzen.

Answer 7

noch ein weiterer Versuch, das gleiche Problem zu lösen - form-container auf npm

Answer 8

Ich habe in der Vergangenheit Redux-Form und Formik verwendet und kürzlich den eingeführten Haken reagieren, und ich habe einen benutzerdefinierten Haken dafür gebaut.Bitte überprüfen Sie es und sehen Sie, ob Sie Ihre Formularvalidierung viel einfacher machen.

github: https://github.com/bluebill1049/react-Hook-form

Website: http://react-hook-form.now.sh

Mit diesem Ansatz werden Sie auch nicht mehr kontrollierter Eingaben mehr getan.

Beispiel unten:

generasacodicetagpre.

Answer 9

Manchmal können Sie mehrere Felder mit ähnlicher Validierung in Ihrer Anwendung haben.In einem solchen Fall empfehle ich, ein gemeinsames Komponentenfeld zu erstellen, in dem Sie diese Validierung halten.

Nehmen wir beispielsweise an, dass Sie an einigen Orten in Ihrer Anwendung einen obligatorischen Texteintrag haben.Sie können eine TextInput-Komponente erstellen:

generasacodicetagpre.

und dann können Sie eine solche Komponente überall in Ihrer Anwendung verwenden:

generasacodicetagpre.

Vorteile:

.
• Sie wiederholen Ihre Validierungslogik nicht
• weniger Code in Ihren Formularen - es ist lesbarer
• Andere gängige Eingangslogik können in der Komponente
aufbewahrt werden
• Sie folgen der Reaktionsrekorde, dass die Komponente so dumm wie möglich sein sollte

ref. https://webfellas.tech/technik/article/5