la validación de la forma redux no se recibe

Estoy tratando de desactivar el botón de envío para mi formulario. He eliminado la mayoría de los manipuladores y las entradas aceptan la entrada de "nombre", así que es más claro ver. La entrada de nombre funciona bien, sin embargo cuando agrego una propulsión de validación a la entrada de nombre, y prop deshabilitado al botón de envío, el botón sigue activo. ¿Qué estoy perdiendo?

    export class RecipeForm extends React.Component {

      onChange = e => {
        const { value, name } = e.target;
        this.setState({
          [name]: value
        });
      };

      // **** other function handlers here *****//


      required = value => {
        if (!value || value === '') {
          return 'This field is required';
        }
        return undefined;
      }

      render() {

        const { name } = this.state;
        const { submitSucceeded, handleSubmit, valid } = this.props;

        if (submitSucceeded) {  // submitSucceeded is a prop of redux form, boolean: true, and succeed to submit 
          alert("You have successfully added a new recipe")
          return 
        }

        let newCategory;
        if (otherCheckbox) {
          newCategory = ;
        }



        return (
          

            

            
 this.onSubmit(recipe))}>
              
Add a new favorite recipe!


              
              


              // **** other inputs here ***** ///
              

              
            


            

          

        );
      }
    }

    const mapStateToProps = state => ({
      menuItems: state.menu.menuItems,
      categoryList: state.users.categoryList,
      userId: state.auth.id,
      authToken: state.auth.authToken
    });

    RecipeForm = connect(mapStateToProps)(RecipeForm);

    export default reduxForm({
      form: "recipe",
      onSubmitFail: (errors, dispatch) =>
        dispatch(focus("recipe", Object.keys(errors)[0]))
    })(RecipeForm);

Pregunta hecha hace 3 años, 4 meses, 28 días - Por techwizkid

2 Respuestas:

  • Hay un par de errores en tu código que podrían estar causando que la validación de la forma no se active correctamente. Aquí te señalo algunos posibles problemas:

    • En la línea donde tienes el atributo `validate="{[this.required]}"` en la entrada de nombre, deberías cambiarlo a `validate={this.required}`. La validación debe ser pasada como una función directamente, no como un string.
    • En la línea donde tienes el botón de envío ``, debes cambiarlo a ``. La prop `valid` viene directamente de Redux Form, por lo que no es necesario acceder a través de `this.props`.

    Una vez corregidos estos errores, deberías ver que el botón de envío se deshabilita correctamente cuando la entrada de nombre no cumple con la validación requerida. Espero que esto te ayude a resolver tu problema.

    Respondida el Dec 18, 2020 a las 13:42 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que estás usando una sintaxis incorrecta para los enlaces de eventos y las directivas value en JSX. En React, debes usar onChange en lugar de onchange, y {value} en lugar de "value".

    Además, estás usando la propiedad validate de forma incorrecta. Deberías estar pasando una función de validación en lugar de una cadena.

    Aquí tienes el código corregido:

    jsx
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, focus } from 'redux-form';
import { Redirect } from 'react-router-dom';

class RecipeForm extends React.Component {

  onChange = e => {
    const { value, name } = e.target;
    this.setState({
      [name]: value
    });
  };

  // None other function handlers here None//


  required = value => {
    if (!value || value === '') {
      return 'This field is required';
    }
    return undefined;
  }

  render() {

    const { name } = this.state;
    const { submitSucceeded, handleSubmit, valid } = this.props;

    if (submitSucceeded) {  // submitSucceeded is a prop of redux form, boolean: true, and succeed to submit 
      alert("You have successfully added a new recipe")
      return 
    }

    let newCategory;
    if (otherCheckbox) {
      newCategory = ;
    }



    return (
      
    
        

        
    
          
    Add a new favorite recipe!
    

          
          


          //     * other inputs here *** ///


          
        
    

        
    
      
    
    );
  }
}

const mapStateToProps = state => ({
  menuItems: state.menu.menuItems,
  categoryList: state.users.categoryList,
  userId: state.auth.id,
  authToken: state.auth.authToken
});

RecipeForm = connect(mapStateToProps)(RecipeForm);

export default reduxForm({
  form: "recipe",
  onSubmitFail: (errors, dispatch) =>
    dispatch(focus("recipe", Object.keys(errors)[0]))
})(RecipeForm);

    Espero que esto resuelva tu problema.

    Respondida el Dec 18, 2020 a las 13:52 - por Gemini

    Votos positivos: 0 | Votos negativos: 0