如何從 React 組件函數 prop 獲取返回值？

Question

我有這個組件：

const WizardView = () => {
  return (
    <Wizard finishButtonClick={() => {}} />
  );
};

finishButtonClick 函數返回一些我想使用的值，並且期望 () => void 有沒有辦法在另一個函數中使用 finishButtonClick 返回的值？

例如這樣的事情：

anotherFunction(finishButtonClickReturnValue);

Answer 1

是的，你可以這樣做：

const WizardView = () => {
  return (
    <Wizard finishButtonClick={value => anotherFunction(value)} />
  );
};

或者，如果您願意，如下所示：

const WizardView = () => {
  function handleClick(value) {
    anotherFunction(value)
  }

  return (
    <Wizard finishButtonClick={handleClick} />
  );
};

Answer 2

您可以在 state 中設置返回值並在另一個函數中使用它

import React, {useState} from 'react'

const WizardView = () => {
 const[finishVal,setFinishVal]=useState()
  const finishbuttonclickfunction=()=>{
    //set the return value in state
    setFinishVal('function return value')
}
anotherFunction(finishVal){
  //you can use the return value here
}
  return (
    <Wizard finishButtonClick={(val) => finishbuttonclickfunction(val)} />
  );
};