web-dev-qa-db-fra.com

withFormik (): Comment utiliser handleChange

Plateforme actuelle: NodeJS (minimal), côté client React w/Redux, Formik, Yup.

Étant donné l'exemple de code suivant (n'incluant pas l'intégralité du code React Component, car il n'est pas pertinent pour la question):

class RegisterPage extends React.Component {
    constructor(props) {
        super(props);
    }

    // (...)

    render () {
        <Form>
            <Field name="email" type="email" />
            <Field name="password" type="password" />
            <Field 
                name="myCheckbox" 
                type="checkbox"
                checked={this.props.values.myCheckbox}
                onChange={  ??????????  } />
        </Form>
    }
}

const handleFormSubmission = (values, { resetForm, setErrors, setSubmitting }) => {
    console.log(values);
};

const handleFormChange = (event) => {
    event.persist();
    console.log('changed');
};

const MyFormik = withFormik({
    mapPropsToValues ({ email, password, myCheckbox }) {
        return {
            email: email || '',
            password: password || '',
            myCheckbox: myCheckbox || false
       }
    },
    validationSchema: (...Yup schema here...),
    handleSubmit (values, bag) { return handleFormSubmission(values, bag); }
})(RegisterPage);

export default connect()(MyFormik);

...comment utiliser la méthode handleChange? J'ai besoin de conserver l'original (celui de Formik) lors de l'ajout de code qui gère ce changement de case à cocher. Il y a un comportement de composant qui dépend de la valeur vérifiée de cette case à cocher.

Veuillez noter que je ne transmets pas l'accessoire onChange à un e-mail ou à un mot de passe, car il n'y a aucun comportement supplémentaire à coder pour ceux-ci. La case à cocher est celle qui aura un comportement spécial.

reactjsformik
6
Arnie

Vous pouvez déclarer un gestionnaire pour la case à cocher et l'utiliser! Utilisation du gestionnaire natif de Formkit et de votre gestionnaire personnalisé.

class RegisterPage extends React.Component {
   constructor(props) {
      super(props);
   }
   // (...)
   handleCheckBox: (e) => {
       // do whatever you want to the value
   }
   render () {
       <Form>
           <Field name="email" type="email" />
           <Field name="password" type="password" />
           <Field 
               name="myCheckbox" 
               type="checkbox"
               checked={this.props.values.myCheckbox}
               onChange={(e) => {this.props.handleChange(e); this.handleCheckBox(e)}} />
       </Form>
   }
}
6
mthrsj