web-dev-qa-db-fra.com

Définir la valeur dans le champ sous forme redux

J'ai un formulaire redux ayant des champs déroulants et texte. Lors du changement de liste déroulante, je dois mettre à jour les autres champs. Les autres champs utilisent un exemple de composant personnalisé

Donc, la structure est comme. 1. composant ayant la forme 2. Composant de champ.

Maintenant, j'ai googlé et trouvé peu de choses pour mettre à jour le champ mais je ne suis pas capable de le faire. Ce que j'ai essayé 1. Ajouter un état dans le champ comme ci-dessous en valeur. Ne marche pas.

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" />

  1. Débranchement essayé mais pas en mesure de l'utiliser. Obtenir une erreur pour aucune expédition

    this.props.dispatch (change ('formulaire', 'accountno', 'test value'));

  2. J'ai essayé this.props.fields mais même pas les champs dans le type d'accessoires.

Cela devrait fonctionner en utilisant 2 ou 3 mais pas capable de trouver où les ajouter. Veuillez me faire savoir comment puis-je les utiliser ou toute autre manière.

reactjsreact-reduxredux-form
19
Rahul Tailwal

Lors de l'utilisation de redux-form, vous n'avez pas besoin de définir la valeur directement dans le champ. Vous pouvez utiliser la méthode initialize pour remplir votre formulaire. Ou initialValues comme propriété de l'objet passé à redux pour mapper l'état aux accessoires. L'autre façon consiste à définir les valeurs individuellement à l'aide de la fonction change de redux-form. Pour le faire fonctionner, vous devez envelopper votre composant avec connect de react-redux. Il intègre la méthode dispatch dans vos accessoires.

import React, { Component } from 'react';
import { reduxForm, Field, change } from 'redux-form';
import { connect } from 'react-redux';

class Form extends Component {
  componentDidMount() {
    this.props.initialize({ accountno: 'some value here' });
    // set the value individually
    this.props.dispatch(change('myFormName', 'anotherField', 'value'));
  }

  render() {
    return (
      <form onSubmit={...}>
        ...
        <Field name="accountno" component={InputText} placeholder="Number" />
        <Field name="anotherField" component={InputText} />
      </form>
    )
  }
}

Form = reduxForm({ 
  form: 'myFormName' 
})(Form);

export default connect(state => ({ 
  // alternatively, you can set initial values here...
  initialValues: {
    accountno: 'some value here'
  } 
}))(Form);
22
Julio Betta

Je viens aussi de me heurter à ce problème. La solution consiste à utiliser initialValues comme dans la réponse de juliobetta, mais la clé est de définir la valeur sur une variable, telle que state.blah.

Vous devez ensuite définir enableReinitialize sur true pour que les champs soient mis à jour lorsque l'état change:

export default connect(state => ({ 
  initialValues: {
    accountno: state.accountno,
  },
  enableReinitialize: true,
}))(Form);

Maintenant, chaque fois que vous changez state.accountno, le champ du formulaire sera mis à jour.

8
Malvineous