web-dev-qa-db-fra.com

redux-form: Comment désactiver le bouton d'envoi si au moins un champ n'est pas valide?

Je rends le formulaire simple ci-dessous en utilisant redux-form et tout fonctionne bien. Maintenant, j'aimerais que le bouton d'envoi soit désactivé dans une situation supplémentaire: Si l'un des Field a une erreur (c'est-à-dire que meta.error est défini).

En parcourant la documentation, je suppose qu'il n'est pas possible pour le <form> environnant de savoir si ses composants <Field> ont une erreur. Peut-être que quelqu'un a une idée, comment le résoudre aussi facilement qu'en utilisant disabled={hasErrors || submitting || pristine}

const EditBlogEntryForm = ({ onSubmit, reset, handleSubmit,
                         pristine, submitting, ...rest }) => {
    console.log('rest: ', rest);
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
                <Field name="title"
                    type="text"
                    component={renderField}
                    label="Titel"
                    className="form-control"
                    placeholder="Titel eingeben..." />
            </div>
            <div className="form-group">
                <Field name="text"
                    component={renderTextArea}
                    label="Text"
                    className="form-control"
                    placeholder="Textinhalt eingeben..." />
            </div>  
            <div className="form-group">
                <Field name="image"
                    type="text"
                    component={renderField}
                    label="Bild-URL:"
                    className="form-control"
                    placeholder="Bildadresse eingeben..." />
            </div>  
            <div>
                <button type="submit" className="btn btn-default"
                    disabled={submitting || pristine}>
                    Blogeintrag speichern
                </button>
                <button type="button" className="btn btn-default"
                    disabled={pristine || submitting}
                    onClick={reset}>
                    Formular leeren
                </button>
            </div>
        </form>
    );
};
reactjsreduxreact-reduxredux-form
11
Christof Kälin

N'abusez pas de l'état dont vous avez besoin en utilisant simplement this.props Pour chaque composant setState, une fois de plus, le rendu

const {invalid} = this.props

return(
<button type="submit" className="btn btn-default"
     disabled={invalid|| submitting || pristine}>
     Blogeintrag speichern
 </button>)

Document complémentaire: https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/

17
masoud soroush

Ce que vous devriez être capable de faire est simplement d’avoir une variable appelée Errors qui sera vraie une fois que votre appel api reviendra avec une erreur

 constructor(super) {
      this.state = {
         errors: false,
      }
 }

 componentWillReceiveProps(nextProps) {
     const that = this;
     if (nextProps.errors) {
        that.setState({errors: true})
     }    
 }

 <button type="submit" className="btn btn-default"
     disabled={this.state.errors || submitting || pristine}>
     Blogeintrag speichern
 </button>
2
Alastair

Les formulaires Redux passent déjà beaucoup de propriétés dans le formulaire. L'un est invalid. C'est ce que j'utilise pour déterminer si l'une des validations de champ a échoué, puis pour désactiver l'envoi.

https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/

1
Nick Graham

Alastair m'a dirigé dans la bonne direction (merci pour ça!). J'imagine que c'est l'un des cas où un état local lié à l'interface utilisateur est en réalité très utile. J'ai donc refactoré le SFC en une classe de réaction. Les classes constructor et componentWillReceiveProps ressemblent à ceci:

constructor(props) {
    super(props);
    this.state = {
        errors: false
    };
}

componentWillReceiveProps(nextProps) {
    if (nextProps.invalid) {
        this.setState({errors: true});
    } else {
        this.setState({errors: false});
    }
}

Maintenant, utiliser this.state.errors pour désactiver le bouton fonctionne parfaitement. Comme vous pouvez le constater, je devais utiliser le formulaire invalid prop redux-form, car son prop error était toujours indéfini et il ne fallait pas oublier de le redonner à nouveau, si le formulaire était valide. De plus, je ne sais pas pourquoi vous avez copié la référence this dans that dans votre réponse. Cela ne changerait aucun comportement car il pointe toujours vers le même objet.

0
Christof Kälin