J'ai trouvé le package Redux Form . Cela fait un très bon travail!
Ainsi, vous pouvez utiliser Redux avec React-Redux .
Vous devez d'abord créer un composant de formulaire (évidemment):
import React from 'react';
import { reduxForm } from 'redux-form';
import validateContact from '../utils/validateContact';
class ContactForm extends React.Component {
render() {
const { fields: {name, address, phone}, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" {...name}/>
{name.error && name.touched && <div>{name.error}</div>}
<label>Address</label>
<input type="text" {...address} />
{address.error && address.touched && <div>{address.error}</div>}
<label>Phone</label>
<input type="text" {...phone}/>
{phone.error && phone.touched && <div>{phone.error}</div>}
<button onClick={handleSubmit}>Submit</button>
</form>
);
}
}
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
// where your form's state will be mounted
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
})(ContactForm);
export default ContactForm;
Après cela, vous connectez le composant qui gère le formulaire:
import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import ContactForm from './ContactForm.react';
class App extends React.Component {
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contact', {})); // clear form
}
render() {
return (
<div id="app">
<h1>App</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(App);
Et ajoutez le réducteur redux-form dans vos réducteurs combinés:
import { combineReducers } from 'redux';
import { appReducer } from './app-reducers';
import { reducer as formReducer } from 'redux-form';
let reducers = combineReducers({
appReducer, form: formReducer // this is the form reducer
});
export default reducers;
Et le module de validation ressemble à ceci:
export default function validateContact(data, props) {
const errors = {};
if(!data.name) {
errors.name = 'Required';
}
if(data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
}
if(!data.phone) {
errors.phone = 'Required';
} else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"'
}
return errors;
}
Une fois le formulaire rempli, lorsque vous souhaitez remplir tous les champs avec des valeurs, vous pouvez utiliser la initialize
fonction:
componentWillMount() {
this.props.dispatch(initialize('contact', {
name: 'test'
}, ['name', 'address', 'phone']));
}
Une autre façon de remplir les formulaires consiste à définir les valeurs initiales.
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
}, state => ({
initialValues: {
name: state.user.name,
address: state.user.address,
phone: state.user.phone,
},
}))(ContactForm);
Si vous avez un autre moyen de gérer cela, laissez simplement un message! Je vous remercie.
redux-forms
? Je me demande comment ce passe-partout passe par rapport aux formes de réactionredux-form
sont abyssales sur toutes les versions d'IE, y compris Edge. Si vous devez le soutenir, cherchez ailleurs.MISE À JOUR: c'est 2018 et je n'utiliserai jamais que Formik (ou des bibliothèques de type Formik)
Il y a aussi react-redux-form ( étape par étape ), qui semble échanger une partie du javascript (et passe-partout) de redux-form avec une déclaration de balisage. Cela a l'air bien, mais je ne l'ai pas encore utilisé.
Un copier-coller du readme:
./components/my-form-component.js
Edit: Comparaison
Les documents react-redux-form fournissent une comparaison avec redux-form:
https://davidkpiano.github.io/react-redux-form/docs/guides/compare-redux-form.html
la source
Pour ceux qui ne se soucient pas d'une énorme bibliothèque pour gérer les problèmes liés aux formulaires, je recommanderais redux-form-utils .
Il peut générer de la valeur et modifier les gestionnaires de vos contrôles de formulaire, générer des réducteurs de formulaire, des créateurs d'actions pratiques pour effacer certains (ou tous) champs, etc.
Tout ce que vous avez à faire est de les assembler dans votre code.
En utilisant
redux-form-utils
, vous vous retrouvez avec une manipulation de formulaire comme suit:Cependant, cette bibliothèque ne résout que le problème
C
etU
, pourR
etD
, peut-être qu'unTable
composant plus intégré est d'antipate.la source
Juste une autre chose pour ceux qui veulent créer un composant de formulaire entièrement contrôlé sans utiliser de bibliothèque surdimensionnée.
ReduxFormHelper - une petite classe ES6, moins de 100 lignes:
Cela ne fait pas tout le travail pour vous. Cependant, il facilite la création, la validation et la gestion d'un composant de formulaire contrôlé. Vous pouvez simplement copier et coller le code ci-dessus dans votre projet ou à la place, inclure la bibliothèque respective -
redux-form-helper
(plug!).Comment utiliser
La première étape consiste à ajouter des données spécifiques à l'état Redux qui représenteront l'état de notre formulaire. Ces données comprendront les valeurs de champ actuelles ainsi qu'un ensemble d'indicateurs d'erreur pour chaque champ du formulaire.
L'état du formulaire peut être ajouté à un réducteur existant ou défini dans un réducteur séparé.
De plus, il est nécessaire de définir une action spécifique déclenchant la mise à jour de l'état du formulaire ainsi que le créateur d'action respectif.
Exemple d'action :
Exemple de réducteur :
La deuxième et dernière étape consiste à créer un composant conteneur pour notre formulaire et à le connecter avec une partie respective de l'état et des actions Redux.
Nous devons également définir un modèle de formulaire spécifiant la validation des champs de formulaire. Maintenant, nous instancions
ReduxFormHelper
object en tant que membre du composant et y passons notre modèle de formulaire et une mise à jour de distribution de rappel de l'état du formulaire.Ensuite, dans la
render()
méthode du composant, nous devons lieronChange
lesonSubmit
événements de chaque champ et du formulaire avec les méthodesprocessField()
etprocessForm()
respectivement, ainsi que d'afficher des blocs d'erreur pour chaque champ en fonction des indicateurs d'erreur de formulaire dans l'état.L'exemple ci-dessous utilise le CSS du framework Twitter Bootstrap.
Exemple de composant de conteneur :
Démo
la source