Tengo dos funciones que deben colgarse en un botón. Una función escribe datos en Firestore y la otra escribe una imagen en Storage. ¿Cómo puedo agregarlos al onClick en un solo botón?
const Header = () => { const submitHandler = async (e) => { e.preventDefault(); try { await setDoc(doc(housesRef, enteredTitle), { title: enteredTitle, descr: enteredText, lat: enteredLatitude, lon: enteredLongitude, }); togglePopup(); setEnteredTitle(""); setEnteredText(""); setEnteredLatitude(""); setEnteredLongitude(""); } catch (err) { alert(err); } }; const imageUpload = () => { const imageRef = ref(storage, `image/${uploadImage.name}`); uploadBytes(imageRef, uploadImage).then(() => { alert("Image Uploaded"); }); }; return ( <div className="header"> ... <input type="submit" value="Add" onClick={} /> ... ); };Simplemente cree una nueva función que llame a esas dos funciones diferentes,
al igual que,
const myEncapsulatingFunc = (func1_params, func2_params) => { myFunc1(func1_params); myFunc2(func2_params); } Adjunte myEncapsulatingFunc al evento onclick y pase los parámetros relevantes.
La respuesta simple es que no puedes
Sin embargo, puede llamarlos por separado así:
return ( <div className="header"> ... <input type="submit" value="Add" onClick={() => { func1(); func2() } } /> ... );¿Por qué no llamar a imageUpload dentro de onSubmitHandler y simplemente pasar onSubmitHandler a onClick?
const submitHandler = async (e) => { e.preventDefault(); imageUpload() try { ... } catch (err) { alert(err); } }; <input type="submit" value="Add" onClick={onSubmitHandler} />