wake-up-neo.net

Wie kann man Eingabewerte mit React.JS richtig validieren?

Ich habe eine einfache Form. Alle Komponenten und der Status werden in der Page-Komponente gespeichert. Es gibt 2 Kopfzeilen und 3 Eingabefelder. Die erste Eingabe soll Text sein und die zweite und dritte soll Ints sein. Wenn der Benutzer den falschen Datentyp eingibt, möchte ich eine Fehlermeldung neben dem Eingabefeld anzeigen. Meine Fragen beziehen sich auf Best Practices in React.JS

Wer entscheidet, dass der Wert gültig ist? Ich nehme an, die einzige Aufgabe des Eingabefeldes besteht darin, den Wert zurück zur Komponente zu leiten, die den Status hat. Bedeutet dies, dass nur Page feststellen kann, ob ein Wert gültig ist?

Wie soll ich das Popup dann anzeigen lassen? Sollte Page ein neues boolesches Zustandselement auslösen müssen, das perper weitergeleitet 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);
65
EasilyBaffled

Zunächst ein Beispiel für das, was ich unten erwähne: http://jsbin.com/rixido/2/edit

Wie kann man Eingabewerte mit React.JS richtig validieren?

Wie auch immer du willst. React dient zum Rendern eines Datenmodells. Das Datenmodell sollte wissen, was gültig ist oder nicht. Sie können Backbone-Modelle, JSON-Daten oder alles, was Sie für die Daten und deren Fehlerstatus darstellen möchten, verwenden. 

Genauer:

Reagieren Sie in der Regel nicht auf Ihre Daten. Es ist für das Rendern und den Umgang mit Ereignissen.

Es gelten folgende Regeln: 

  1. elemente können ihren Zustand ändern.
  2. sie können nicht Requisiten wechseln.
  3. sie können einen Rückruf auslösen, der die Requisiten der obersten Ebene ändert.

Wie kann man entscheiden, ob etwas eine Requisite oder ein Staat sein soll? Bedenken Sie Folgendes: Will JEDER Teil Ihrer App als das Textfeld wissen, dass der eingegebene Wert schlecht ist? Wenn nein, mache es zu einem Staat. Wenn ja, sollte es eine Requisite sein.

Wenn Sie zum Beispiel eine separate Ansicht zum Rendern haben wollten, haben Sie 2 Fehler auf dieser Seite. Ihr Fehler müsste dann einem Toplevel-Datenmodell bekannt sein.

Wo soll dieser Fehler leben?
Wenn Ihre App beispielsweise Backbone-Modelle renderte, hätte das Modell selbst eine validate () - Methode und eine validateError-Eigenschaft, die Sie verwenden könnten. Sie könnten andere Smart-Objekte rendern, die dasselbe tun könnten. React sagt auch, versuchen Sie, Requisiten auf ein Minimum zu beschränken und den Rest der Daten zu generieren. Wenn Sie also einen Validator (z. B. https://github.com/flatiron/revalidator ) hätten, könnten Ihre Validierungen nach unten dringen und jede Komponente könnte Requisiten mit der zugehörigen Validierung prüfen, um festzustellen, ob sie gültig ist.

Es liegt weitgehend an dir. 

(Ich bin persönlich und benutze Backbone-Modelle, um sie in React zu rendern. Ich habe eine Toplevel-Fehlermeldung, die anzeigt, wenn irgendwo ein Fehler auftritt, der den Fehler beschreibt.)

76
z5h

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

Ich schreibe ein einfaches E-Mail- und Submit-Button-Formular, das die E-Mail überprüft und das Formular übermittelt. Bei redux-form führt form standardmäßig die Datei event.preventDefault () für die html-Aktion onSubmit aus.

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class LoginForm extends Component {
  onSubmit(props) {
    //do your submit stuff
  }


  render() {
    const {fields: {email}, handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <input type="text" placeholder="Email"
               className={`form-control ${email.touched && email.invalid ? 'has-error' : '' }`}
          {...email}
        />
          <span className="text-help">
            {email.touched ? email.error : ''}
          </span>
        <input type="submit"/>
      </form>
    );
  }
}

function validation(values) {
  const errors = {};
  const emailPattern = /(.+)@(.+){2,}\.(.+){2,}/;
  if (!emailPattern.test(values.email)) {
    errors.email = 'Enter a valid email';
  }

  return errors;
}

LoginForm = reduxForm({
  form: 'LoginForm',
  fields: ['email'],
  validate: validation
}, null, null)(LoginForm);

export default LoginForm;
10
STEEL

Ich habe Diese Bibliothek geschrieben, mit der Sie Ihre Formularelementkomponenten umschließen und Ihre Validatoren im Format definieren können:

<Validation group="myGroup1"
    validators={[
            {
             validator: (val) => !validator.isEmpty(val),
             errorMessage: "Cannot be left empty"
            },...
        }]}>
            <TextField value={this.state.value}
                       className={styles.inputStyles}
                       onChange={
                        (evt)=>{
                          console.log("you have typed: ", evt.target.value);
                        }
                       }/>
</Validation>
3
VISHAL DAGA

Ihr jsfiddle funktioniert nicht mehr ... __ Ich habe es behoben: http://jsfiddle.net/tkrotoff/bgC6E/40/ mit React 16 und ES6 Klassen.

class Adaptive_Input extends React.Component {
  handle_change(e) {
    var new_text = e.currentTarget.value;
    this.props.on_Input_Change(new_text);
  }

  render() {
    return (
      <div className="adaptive_placeholder_input_container">
        <input
          className="adaptive_input"
          type="text"
          required="required"
          onChange={this.handle_change.bind(this)} />
        <label
          className="adaptive_placeholder"
          alt={this.props.initial}
          placeholder={this.props.focused} />
      </div>
    );
  }
}

class Form extends React.Component {
  render() {
    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>
    );
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Name: 'No Name',
      Value_1: '0',
      Value_2: '0',
      Display_Value: '0'
    };
  }

  handle_text_input(new_text) {
    this.setState({
      Name: new_text
    });
  }

  handle_value_1_input(new_value) {
    new_value = parseInt(new_value);
    var updated_display = new_value + parseInt(this.state.Value_2);
    updated_display = updated_display.toString();
    this.setState({
      Value_1: new_value,
      Display_Value: updated_display
    });
  }

  handle_value_2_input(new_value) {
    new_value = parseInt(new_value);
    var updated_display = parseInt(this.state.Value_1) + new_value;
    updated_display = updated_display.toString();
    this.setState({
      Value_2: new_value,
      Display_Value: updated_display
    });
  }

  render() {
    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.bind(this)}
          handle_value_1_input={this.handle_value_1_input.bind(this)}
          handle_value_2_input={this.handle_value_2_input.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.getElementById('app'));

Und nun wurde derselbe Code mit der Formularvalidierung dank dieser Bibliothek gehackt: https://github.com/tkrotoff/react-form-with-constraints => http://jsfiddle.net/ tkrotoff/k4qa4heg/

 http://jsfiddle.net/tkrotoff/k4qa4heg/

const { FormWithConstraints, FieldFeedbacks, FieldFeedback } = ReactFormWithConstraints;

class Adaptive_Input extends React.Component {
  static contextTypes = {
    form: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      field: undefined
    };

    this.fieldWillValidate = this.fieldWillValidate.bind(this);
    this.fieldDidValidate = this.fieldDidValidate.bind(this);
  }

  componentWillMount() {
    this.context.form.addFieldWillValidateEventListener(this.fieldWillValidate);
    this.context.form.addFieldDidValidateEventListener(this.fieldDidValidate);
  }

  componentWillUnmount() {
    this.context.form.removeFieldWillValidateEventListener(this.fieldWillValidate);
    this.context.form.removeFieldDidValidateEventListener(this.fieldDidValidate);
  }

  fieldWillValidate(fieldName) {
    if (fieldName === this.props.name) this.setState({field: undefined});
  }

  fieldDidValidate(field) {
    if (field.name === this.props.name) this.setState({field});
  }

  handle_change(e) {
    var new_text = e.currentTarget.value;
    this.props.on_Input_Change(e, new_text);
  }

  render() {
    const { field } = this.state;
    let className = 'adaptive_placeholder_input_container';
    if (field !== undefined) {
      if (field.hasErrors()) className += ' error';
      if (field.hasWarnings()) className += ' warning';
    }

    return (
      <div className={className}>
        <input
          type={this.props.type}
          name={this.props.name}
          className="adaptive_input"
          required
          onChange={this.handle_change.bind(this)} />
        <label
          className="adaptive_placeholder"
          alt={this.props.initial}
          placeholder={this.props.focused} />
      </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Name: 'No Name',
      Value_1: '0',
      Value_2: '0',
      Display_Value: '0'
    };
  }

  handle_text_input(e, new_text) {
    this.form.validateFields(e.currentTarget);

    this.setState({
      Name: new_text
    });
  }

  handle_value_1_input(e, new_value) {
    this.form.validateFields(e.currentTarget);

    if (this.form.isValid()) {
      new_value = parseInt(new_value);
      var updated_display = new_value + parseInt(this.state.Value_2);
      updated_display = updated_display.toString();
      this.setState({
        Value_1: new_value,
        Display_Value: updated_display
      });
    }
    else {
      this.setState({
        Display_Value: 'Error'
      });
    }
  }

  handle_value_2_input(e, new_value) {
    this.form.validateFields(e.currentTarget);

    if (this.form.isValid()) {
      new_value = parseInt(new_value);
      var updated_display = parseInt(this.state.Value_1) + new_value;
      updated_display = updated_display.toString();
      this.setState({
        Value_2: new_value,
        Display_Value: updated_display
      });
    }
    else {
      this.setState({
        Display_Value: 'Error'
      });
    }
  }

  render() {
    return(
      <div>
        <h2>Name: {this.state.Name}</h2>
        <h2>Value 1 + Value 2 = {this.state.Display_Value}</h2>

        <FormWithConstraints ref={form => this.form = form} noValidate>
          <Adaptive_Input
            type="text"
            name="name_input"
            initial={'Name Input'}
            focused={'Name Input'}
            on_Input_Change={this.handle_text_input.bind(this)} />
          <FieldFeedbacks for="name_input">
            <FieldFeedback when="*" error />
            <FieldFeedback when={value => !/^\w+$/.test(value)} warning>Should only contain alphanumeric characters</FieldFeedback>
          </FieldFeedbacks>

          <Adaptive_Input
            type="number"
            name="value_1_input"
            initial={'Value 1'}
            focused={'Value 1'}
            on_Input_Change={this.handle_value_1_input.bind(this)} />
          <FieldFeedbacks for="value_1_input">
            <FieldFeedback when="*" />
          </FieldFeedbacks>

          <Adaptive_Input
            type="number"
            name="value_2_input"
            initial={'Value 2'}
            focused={'Value 2'}
            on_Input_Change={this.handle_value_2_input.bind(this)} />
          <FieldFeedbacks for="value_2_input">
            <FieldFeedback when="*" />
          </FieldFeedbacks>
        </FormWithConstraints>
      </div>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById('app'));

Die hier vorgeschlagene Lösung ist hackig, da ich versucht habe, sie nahe an der ursprünglichen Version von jsfiddle zu halten. Überprüfen Sie für eine korrekte Formularvalidierung mit den Bedingungen von "react-form-with-constraints" https://github.com/tkrotoff/react-form-with-constraints#examples

2
tanguy_k

Verwenden SieonChange={this.handleChange.bind(this, "name")method undvalue={this.state.fields["name"]}für das Eingabetextfeld und darunter das span-Element, um Fehler anzuzeigen, siehe das folgende Beispiel.

export default class Form extends Component {

  constructor(){
    super()
    this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }
  }

  handleValidation(){
       let fields = this.state.fields;
       let errors = {};
       let formIsValid = true;

       if(!fields["name"]){
          formIsValid = false;
          errors["name"] = "Name field cannot be empty";
       }

       if(typeof fields["name"] !== "undefined" && !fields["name"] === false){
          if(!fields["name"].match(/^[a-zA-Z]+$/)){
             formIsValid = false;
             errors["name"] = "Only letters";
          }
       }

       if(!fields["email"]){
          formIsValid = false;
          errors["email"] = "Email field cannot be empty";
       }

       if(typeof fields["email"] !== "undefined" && !fields["email"] === false){
          let lastAtPos = fields["email"].lastIndexOf('@');
          let lastDotPos = fields["email"].lastIndexOf('.');

          if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') === -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
             formIsValid = false;
             errors["email"] = "Email is not valid";
           }
      }

      if(!fields["message"]){
         formIsValid = false;
         errors["message"] = " Message field cannot be empty";
      }

      this.setState({errors: errors});
      return formIsValid;
  }

  handleChange(field, e){
      let fields = this.state.fields;
      fields[field] = e.target.value;
      this.setState({fields});
  }

  handleSubmit(e){
      e.preventDefault();
      if(this.handleValidation()){
          console.log('validation successful')
        }else{
          console.log('validation failed')
        }
  }

  render(){
    return (
      <form onSubmit={this.handleSubmit.bind(this)} method="POST">
          <div className="row">
            <div className="col-25">
                <label htmlFor="name">Name</label>
            </div>
            <div className="col-75">
                <input type="text" placeholder="Enter Name"  refs="name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/>
                <span style={{color: "red"}}>{this.state.errors["name"]}</span>
            </div>
          </div>
          <div className="row">
            <div className="col-25">
              <label htmlFor="exampleInputEmail1">Email address</label>
            </div>
            <div className="col-75">
                <input type="email" placeholder="Enter Email" refs="email" aria-describedby="emailHelp" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>
                <span style={{color: "red"}}>{this.state.errors["email"]}</span>
            </div>
          </div>
          <div className="row">
            <div className="col-25">
                <label htmlFor="message">Message</label>
            </div>
            <div className="col-75">
                <textarea type="text" placeholder="Enter Message" rows="5" refs="message" onChange={this.handleChange.bind(this, "message")} value={this.state.fields["message"]}></textarea>
                <span style={{color: "red"}}>{this.state.errors["message"]}</span>
            </div>
          </div>
          <div className="row">
            <button type="submit" disabled={this.state.disabled}>{this.state.disabled ? 'Sending...' : 'Send'}</button>
          </div>
      </form>
    )
  }
}
1
KARTHIKEYAN.A

Ich habe vor kurzem eine Woche lang viele Lösungen untersucht, um meine Formulare in einer App zu überprüfen. Ich habe mit den meisten starrten angefangen, aber ich konnte keinen finden, der so arbeitete, wie ich erwartet wurde. Nach wenigen Tagen wurde ich ziemlich frustriert, bis ich ein sehr neues und erstaunliches Plugin fand: https://github.com/kettanaito/react-advanced-form

Der Entwickler ist sehr ansprechend und seine Lösung, nach meiner Recherche, verdient es, aus meiner Sicht die am meisten starren zu werden. Ich hoffe es könnte helfen und Sie werden es zu schätzen wissen. 

0
Jonas

Ich habe in der Vergangenheit Redux-Form und Formik verwendet und vor kurzem React Hook eingeführt, und ich habe einen benutzerdefinierten Hook dafür erstellt. Bitte probieren Sie es aus und prüfen Sie, ob es Ihre Formularvalidierung erheblich erleichtert.

Github: https://github.com/bluebill1049/react-hook-form

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

mit diesem Ansatz machen Sie keine kontrollierten Eingaben mehr.

beispiel unten:

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialise the hook
  const onSubmit = (data) => { console.log(data) } // callback when validation pass

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}

      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply a Refex validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}

      <input type="submit" />
    </form>
  )
}
0
Bruce

noch ein weiterer Schritt zum gleichen Problem - form-containerauf npm

0
vitkon