如何將值從一個函數傳遞到另一個函數而不觸發另一個函數？

Question

在處理 React Avatar 時，每當我嘗試通過裁剪上傳圖片時，每次裁剪都會觸發 OnCrop 函數。 但是，我需要將 onCrop 值傳遞給 Upload() 函數而不調用 Upload() 函數。 只有在單擊按鈕時才需要調用 Upload() 函數。 或者任何其他改進我的代碼的想法，以便當我點擊上傳按鈕時，OnCrop 生成的最終值將發送到服務器。 任何幫助表示贊賞。

const App = () =>{

function Oncrop(pv){
   const file = pv;
   Upload(file);

}

function Upload(file){
   axios.post("/api",file);
}


return(
<Avatar     width={200}
            height={200}
            onCrop={onCrop}
            onClose={onClose}
            src={null}
/>   
<button onClick={Upload}>Upload</button>  

)

export default App;

Answer 1

你需要使用一個狀態來做到這一點：

const [file, setFile] = useState();
function Oncrop(pv){
   setFile(pv)
}
function Upload(){
   axios.post("/api",file);
}