web-dev-qa-db-fra.com

Modifier par programme la valeur du champ Redux-Form

Quand j'utilise redux-form v7, je trouve qu’il n’ya aucun moyen de définir la valeur du champ. Maintenant, dans mon form, j'ai deux composants select. La valeur de la seconde sera effacée lorsque la première valeur du composant select sera modifiée.

En classe rendre:

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>site:</div>
  <div className={style.content}>
    <Field
      name="site"
      options={sites}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
    />
  </div>
</div>

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>net:</div>
  <div className={style.content}>
    <Field
      name="net"
      options={nets}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
      warning={warnings.net}
    />
  </div>
</div>

Maintenant, j'ajoute le hook select change et comment puis-je changer l'autre valeur select

renderSelectField = props => {
  const {
    input,
    type,
    meta: { touched, error },
    ...others
  } = props
  const { onChange } = input
  const _onChange = value => {
    onChange(value)
    this.handleSelectChange({ value, type: input.name })
  }
  return (
    <CHSelect 
      error={touched && error}
      {...input}
      {...others}
      onChange={_onChange}
      onBlur={null}
    />
  )
}
javascriptreactjsreduxredux-form
23
taven

Vous pouvez avoir la logique onChange dans this.handleSelectChange({ value, type: input.name }) et utiliser change action de redux-form

Selon les docs:

change (champ: Chaîne, valeur: tout): Fonction

Change la valeur d'un champ dans le magasin Redux. Ceci est un créateur d’action liée, donc il ne retourne rien.

Code:

handleSelectChange = (value, type) => {
     if(type === "site") {
          this.props.change('net', "newValue");
     }
}
const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({change}, dispatch);
}
31
Shubham Khatri