La valeur définie dans le champ en forme redux

J'ai redux forme de liste déroulante et les champs de texte. Sur la liste déroulante changer je mettre à jour les autres champs. Les autres champs sont à l'aide du composant personnalisé exemple

Ainsi, la structure est comme.
1. composant ayant la forme
2. Composante du champ.

Maintenant j'ai googlé et trouvé quelques petites choses à mettre à jour le champ, mais pas en mesure de le faire.
Ce que j'ai essayé
1. L'ajout de l'état dans le domaine comme ci-dessous en valeur. Ne fonctionne pas.

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

  1. Essayé d'être expédiés, mais pas en mesure de l'utiliser. Avoir d'erreur pour aucune livraison je prop type

    cette.accessoires de jeu.l'expédition(modifier('form', 'accountno', 'test'));

  2. Essayé ce.accessoires de jeu.champs mais même pas des champs dans les accessoires de type.

Il doit travailler à l'aide de 2 ou 3, mais pas en mesure de trouver l'emplacement de ceux-ci. S'il vous plaît laissez-moi savoir comment je peux utiliser ces ou de toute autre manière.

  • Vous devez valider onChange comme une propriété de input avec PropTypes.shape.
  • où dois-je ajouter que?
  • WOW! C'est une autre question maintenant =). eh bien, à mon humble avis, je ne pense pas que vous devez valider tous les redux-form méthodes et des accessoires (onChange, disabled, etc...) dans votre personnalisé composant d'entrée, sauf s'ils sont requis. Mais pour répondre à votre question, jetez un oeil à cet article andrewhfarmer.com/validate-nested-proptypes. Il montre comment utiliser la proptype shape.
InformationsquelleAutor Rahul Tailwal | 2017-05-02
  1. 25

    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 une propriété de l'objet passé en redux de carte de l'état pour les accessoires. L'autre façon est de définir les valeurs individuellement à l'aide de la fonction change de redux-form. Afin de le rendre au travail, vous avez besoin d'envelopper votre composant avec connect de react-redux. Il intègre le dispatch méthode 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);
    • j'ai essayé toutes ces options, aucune travaillent. je l'ai réglé comme SecurityExemptionsNew = connect(mapStateToProps, mapDispatchToProps)( SecurityExemptionsNew ); //Decorate the form component export default reduxForm({ form: 'SecurityExemptionsNewForm', // a unique name for this form initialValues: { service_domain: 'Corporate (Internal/External)' } })(SecurityExemptionsNew);
    • change() travaillé pour moi mieux que initalValues becasue initialize rerenderd toute ma page et rendu inutile où le changement est la seule rerenderd d'une entrée. merci julio
    InformationsquelleAutor Julio Betta
  2. 9

    Vient à l'encontre de cette question. La solution est d'utiliser initialValues comme dans juliobetta réponse, cependant, la clé est de définir la valeur d'une variable, telle que state.blah.

    Vous devez ensuite réglez l'option enableReinitialize à true de sorte que les champs mis à jour lorsque les changements d'état:

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

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

    InformationsquelleAutor Malvineous