web-dev-qa-db-fra.com

Formulaire de saisie utilisant Redux Form non mis à jour

Mon champ de saisie ne se met pas à jour lorsque vous appuyez sur une touche:

import React, { Component, PropTypes } from 'react';

import { Field, reduxForm } from 'redux-form';

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city"
                   component={city =>
                     <input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
                   }
            />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'cityForm'
})(CitySelector);

Dois-je fournir un gestionnaire onChange pour les saisies de texte?

reactjsreduxredux-form
14
dagda1

J'avais le même problème et mon erreur était très simple.

Voici ce que j'ai eu:

import { combineReducers } from 'redux';
import { reducer as forms } from 'redux-form';

import otherReducer from './otherReducer';

export default combineReducers({ otherReducer, forms });

Notez que j'importais redux-form reducer en tant que forms et le transmettais tel quel à mes combineReducers (comme je l'ai fait avec otherReducer) à l'aide de la valeur abrégée de la propriété de l'objet ES6.

Le problème est que la clé utilisée pour passer redux-form réducteur à notre combineReducers DOIT être nommée form.

export default combineReducers({ customer, form: forms });

ou

import { reducer as form } from 'redux-form';
export default combineReducers({ otherReducer, form });

J'espère que ceci aide quelqu'un d'autre...

59
rafaelbiten

Si vous utilisez des structures de données immuables, au lieu de:

import { reduxForm } from 'redux-form';

utilisez ceci:

import { reduxForm } from 'redux-form/immutable';

Voir ici pour plus d'infos http://redux-form.com/6.7.0/examples/immutable/

22
Aref Aslani

Si vous fournissez un composant d'entrée personnalisé à la Field, alors oui, vous devez appeler onChange transmis dans le input prop de votre composant. En fait, vous avez presque tout compris en répandant city.input, mais il y a un piège.

Lorsque vous définissez un composant sans état (ou simplement une fonction) insiderender(), il est recréé à chaque rendu. Et comme ce composant sans état est passé en tant que prop (component) à Field, il force Field à effectuer le rendu après chaque reproduction. Ainsi, votre entrée va perdre le focus chaque fois que CitySelector composant sera rendu, ainsi, aucune pression sur une touche ne sera capturée.

Vous devez extraire votre composant sans état dans une définition distincte:

const myInput = ({ input }) => (
  <input type="text" className="form-control" {...input} placeholder="enter a city for a 5 day forecast" />
);

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city" component={myInput} />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

Cela rend également votre code plus lisible.

Vous trouverez plus d’informations sur ce problème dans documentation officielle de Redux Form. Notez que vous pouvez probablement utiliser la valeur par défaut input sans créer la vôtre. Jetez un coup d'œil à exemple de formulaire simple .

1
Konstantin Grushetsky

J'avais juste un problème similaire à cette question, sauf que mon formulaire n'était pas soumis et que ma fonction de validation n'était pas non plus déclenchée.

C'était à cause de ça:

Je l'ai changé de input à quelque chose d'autre et il s'est totalement cassé redux-forme silencieusement

const TextInput = ({
    input,                                                 <--- DO NOT CHANGE THIS
    placeholder,
    type,
    meta: { touched, error, warning }
  }) => {
    return (
      <div className="row-md">
          <input
            placeholder={placeholder}
            type={type}
            className="form-text-input primary-border"
            {...input}                                     <--- OR THIS
          />
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    )
}

Voici le reste de mes commentaires si quelqu'un veut l'étudier:

<Field
  component={TextInput}
  type="tel"
  name="person_tel"
  placeholder="Mobile Phone Number"
  value={this.props.person_tel}
  onChange={(value) => this.props.updateField({ prop: 'person_tel', value })}
/>
0
agm1984