如何在一个 onClick 中添加两个功能

Question

I have two functions that need to be hung on one button. One function writes data to the Firestore, and the other writes a picture to Storage. How can I add them to the onClick on a single button?

 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={} />... ); };

Answer 1

Simply create a new function that calls those two different functions,

like so,

const myEncapsulatingFunc = (func1_params, func2_params) => {
  myFunc1(func1_params);
  myFunc2(func2_params);
}

Attach myEncapsulatingFunc to the onclick event and pass in the relevant parameters.

Answer 2

The simple answer is you can't

You can however, just call them seperately like this:

return (
    <div className="header">
     ...
                  <input
                    type="submit"
                    value="Add"
                    onClick={() => {
                               func1();
                               func2()
                            } }
                  />
     ...
   
  );

Answer 3

Why not calling imageUpload inside onSubmitHandler and just passing onSubmitHandler to the onClick?

const submitHandler = async (e) => {
    e.preventDefault();
    imageUpload()
    try {
...
    } catch (err) {
      alert(err);
    }
  };
    
<input
   type="submit"
   value="Add"
   onClick={onSubmitHandler}
 />