web-dev-qa-db-fra.com

Le meilleur moyen de soumettre des données FORM avec React Redux?

Je suis un peu perplexe sur cette simple question! Je veux simplement prendre mes données de formulaire, les valider, les soumettre et soumettre une demande de publication à l'API Express. Mais avant cela, je ne pense pas avoir une compréhension approfondie de la façon d'y parvenir. J'ai regardé cette question et ces et bien d'autres, mais je ne suis pas sûr que ce soit la meilleure approche.

Voici comment je suppose que cela sera entrepris:

Je crée un composant React pour la page d'inscription. (Simplifié pour la démonstration)

class SignupForm extends Component {
    constructor(props){
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(val){
        debugger;
    }
    render(){
        return (
            <form onSUbmit={ (e)=> this.onSubmit(e) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

Lorsque vous cliquez sur le bouton, la fonction OnSubmit () se déclenche, où les données JSON seront transmises.

{
   "name": "Kanye",
   "surname": "West",
   "email":"[email protected]",
   "password":"notsurehowthiswillwork"
}

Où je peux déclencher mon action SignupAction() qui fera un appel AJAX à mon API et puis mettra à jour mes réducteurs.

La confusion se multiplie quand il s'agit d'utiliser des bibliothèques comme react-redux-form ou redux-form . Je veux simplement avoir simplement un modèle ou quelque chose pour name, surnameemail et password, mais je pense que ces bibliothèques sont sur-conçues dès que comme ils commencent à avoir leur propre réducteur comme:

const store = createStore(combineForms({
   user: initialUser,
}));

MON AUTRE OPTION EST: 

class SignupForm extends Component {

    constructor(props){
        super(props);
        this.state.form = {
            name : '',
            surname: '',
            email: '',
            password: ''
        }
    }
    onSubmit(e){
        e.preventDefault();
        this.props.SignupAction(this.state.form);
        // then reset the state agian to '' 
    }
}

Mais , ma question est ... est-ce que cela affectera les performances et si oui POURQUOI?

javascriptformsreactjs
9
dsomel21

Je suggère d'utiliser redux-form . Il vous donne les options suivantes:

  1. Validation des entrées
  2. Différents types d'entrées, y compris la date et les téléchargements de fichiers
  3. Fournit une méthode onSubmit qui est appelée après la réussite de votre validation (c'est le point où vous envoyez une action pour appeler votre API et mettre à jour l'état)

Mais si vous ne voulez toujours pas utiliser (je vous recommande fortement de l'utiliser), ce que vous pouvez faire est de soumettre simplement valider vos données et envoyer une action dans votre conteneur. Donc, passez vos données en tant que paramètres de votre composant à votre conteneur où vous envoyez une action appelle l'API post/put (sous forme redux, vous n'avez pas besoin de passer quoi que ce soit, vous pouvez directement lire à partir du magasin).

    onSubmit(val){
        debugger;
    }
    render(){
        const { onSubmit } = this.props //pass onSubmit from 
        return (
            <form onSubmit={ (e)=> {onSubmit} ) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

Conteneur: 

mapDispatchToProps(dispatch){
   return {
    onSubmit => {
     //dispatch action
     }
  }
5
Harkirat Saluja

Un moyen très simple de gérer les formulaires:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;
8
E. Fortes