ReactJS - Redux Form - comment afficher/cacher conditionnellement un élément basé sur un champ radio ?

Question

Je suis relativement nouveau dans Redux et j'ai un formulaire qui a des entrées radio "Oui" ou "Non". En fait, je veux afficher conditionnellement un autre élément qui contient un autre champ de formulaire redux, en fonction de la sélection de l'entrée radio. Est-ce qu'il y a une façon directe de faire cela ?

J'essaie de vérifier le formProps.site_visit mais je reçois un message d'erreur indiquant qu'elle n'est pas définie. Pour mémoire, j'ai considérablement réduit la quantité de code dans ce composant par souci de concision.

export class RequestForm extends React.Component {

submit(formProps) {

   const request = {
      square_footage: formProps.get('square_footage'),
      site_visit: formProps.get('site_visit'),
   };

   this.props.dispatch(createRequest(request));
}

// Redux Form Props.
    const { handleSubmit, pristine, reset, submitting } = this.props
    return (
      <form className="page-form__wrapper">
        <div className="page-form__block">
          <div className="page-form__block">
            <p> Is a site visit required to complete this request? </p>
            <Field name="site_visit"
              component={RadioButtonGroup}
            >
              <RadioButton value="true" label="Yes" />
              <RadioButton value="false" label="No" />
            </Field>
          </div>
          {this.formProps.site_visit === true &&
            <div className="page-form__block">
              <p> Estimate the total area of work in square feet </p>
              <Field name="square_footage" component={TextField} hintText="Square Feet" />
            </div>
          }
       </div>
     </form>
   );
}

Merci d'avance !

Answer 1

Vous devrez utiliser un formValueSelector

const selector = formValueSelector('formName');

function mapStateToProps(state, props) {
    const isChecked = selector(state, 'checkboxField');
    return { isChecked };
}

connect en utilisant mapStateToProps

la méthode de rendu ressemblera à ceci.

render() {
    return (
        { this.props.isChecked && (
            <div>
                this only shows up if the checkboxField Field is checked
            </div>
        ) }
    );
}

éditer :

On dirait que vous utilisez reselect - Je n'ai jamais utilisé createStructuredSelector et je ne comprends pas à 100% la documentation, mais une solution possible pourrait être :

const mMapStateToProps = createStructuredSelector({
    request: selectRequestForm(), 
    user: selectUser()
});

const mapStateToProps = (state, props) => {
    return {
        isChecked: selector(state, 'checkboxField'),
        ... mMapStateToProps(state, props) // not sure if createStructuredSelector accepts a props param
    }
};

qui composera les deux. Je pense que vous pouvez également utiliser createSelector con mMapStateToProps y el mapStateToProps J'ai initialement posté...