¿Cómo validar correctamente los valores de entrada con React.JS?

Solución:

Primero, aquí hay un ejemplo de lo que mencionaré a continuación: http://jsbin.com/rixido/2/edit

¿Cómo validar correctamente los valores de entrada con React.JS?

Como tú quieras. React es para renderizar un modelo de datos. El modelo de datos debe saber qué es válido o no. Puede usar modelos Backbone, datos JSON o cualquier cosa que desee para representar los datos y su estado de error.

Más específicamente:

React es generalmente independiente de sus datos. Es para renderizar y tratar eventos.

Las reglas a seguir son:

1. los elementos pueden cambiar su estado.
2. no pueden cambiar de utilería.
3. pueden invocar una devolución de llamada que cambiará los accesorios de nivel superior.

¿Cómo decidir si algo debe ser un accesorio o un estado? Considere esto: ¿ALGUNA parte de su aplicación que no sea el campo de texto querría saber que el valor ingresado es incorrecto? Si no, conviértalo en un estado. Si es así, debería ser un accesorio.

Por ejemplo, si desea que una vista separada muestre “Tiene 2 errores en esta página”. entonces su error debería ser conocido por un modelo de datos de nivel superior.

¿Dónde debería vivir ese error?
Si su aplicación estuviera renderizando modelos Backbone (por ejemplo), el modelo en sí tendría un método validate () y una propiedad validateError que podría usar. Podría renderizar otros objetos inteligentes que podrían hacer lo mismo. React también dice tratar de mantener los accesorios al mínimo y generar el resto de los datos. entonces, si tuviera un validador (por ejemplo, https://github.com/flatiron/revalidator), entonces sus validaciones podrían filtrarse y cualquier componente podría verificar los accesorios con su validación coincidente para ver si es válido.

Depende en gran medida de usted.

(Yo soy personalmente usando modelos Backbone y renderizándolos en React. Tengo una alerta de error de nivel superior que muestro si hay un error en alguna parte, describiendo el error).

Puedes usar npm install --save redux-form

Estoy escribiendo un correo electrónico simple y un formulario de botón de envío, que valida el correo electrónico y envía el formulario. con redux-form, el formulario de forma predeterminada ejecuta event.preventDefault () en la acción html onSubmit.

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;

He escrito esta biblioteca que le permite envolver los componentes de sus elementos de formulario y le permite definir sus validadores en el formato: –

<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>

---

---

Utiliza Nuestro Buscador