Espero que estéis todos bien.
Tengo un botón onclick que llama a 2 funciones PERO no funciona y no aparece ningún error en la consola, así que no sé dónde está el problema.
Aquí está mi código
<div className="d-grid gap-2"> <Bouton btnCss = 'btn btn-success my-3' click= { () => { this.props.handleSubmit; this.setState({begin : true})}}> Commencer la tâche </Bouton> </div> </form> </> ) } } export default withFormik({ mapPropsToValues : () => ({ tache : '', unite : '', commentaire : '' }), validationSchema : Yup.object().shape({ tache : Yup.number() .required('Choisissez une tâche'), unite : Yup.number() .required('Choisissez une unite'), commentaire : Yup.string() .min(5, 'Le Texte est trop court') .required('Veuillez entre un texte') }), handleSubmit : (values, {props, resetForm}) => { resetForm(); props.validation(values.tache, values.unite, values.commentaire); } }) (taskForm)¡Gracias por su ayuda compañeros!
¿Por qué no llamas a una función, que llama a las siguientes dos funciones? Algo como esto:
handleClick() { function1(); function2(); } <Bouton btnCss = 'btn btn-success my-3' onClick= { () => { this.handleClick() }}> Commencer la tâche </Bouton> Siempre puede agregar async/await si necesita esperar a que se complete el primero antes de activar el segundo. 🙂
No estás llamando a tu this.props.handleSubmit
Debería ser this.props.handleSubmit()
Cuando estabas llamando previamente a tu función, estabas usando:
<Bouton click= {this.props.handleSubmit}>Commencer la tâche</Bouton>De hecho, estaba pasando a su componente personalizado una referencia a la función que se llamará cuando se haga clic en el botón.
A continuación, el botón llama a la función. Se podría decir que la función onClick añade el ()
Como lo haría cuando recibe una devolución de llamada en sus argumentos:
const functionWithACallback = (callback) => { // Do stuff callback(); }Sin embargo, ahora lo que está haciendo es pasar una función anónima para que se llame cuando se haga clic en su botón. estas pasando:
() => { this.props.handleSubmit; this.setState({begin : true}) }Sin embargo, aquí nunca se llama a this.props.handleSubmit.
También los comentarios realizados y la otra respuesta son las buenas prácticas a seguir, a saber:
onClick en lugar de click .handleClick y llamarla cuando se haga clic en su botón para mantener su declaración de devolución lo más simple posible.