React自定義onClick事件與參數

Question

我想有一個自定義的onClick事件發射任何時候我的一個被選中，但我無法讓step.id正確傳遞。我嘗試調度requestStep時未定義stepId。有什麼想法嗎？

var requestStepOnEnter = ({ stepId }) => { 
    store.dispatch(requestStep(stepId)); 
}; 

const ExperimentDetail = ({ steps }) => (
    <div className="experiment-detail"> 
    { 
     steps.map(step => 
     <NavItem 
     eventKey={step.order} 
     key={step.id} 
     onClick= {() => requestStepOnEnter(stepId)}> 
     {step.order} 
     </NavItem> 
    ) 
    } 
    </div> 
); 

export default ExperimentDetail; 

Answer 1

變化

var requestStepOnEnter = ({ stepId }) => { 
    store.dispatch(requestStep(stepId)); 
}; 

到

var requestStepOnEnter = (stepId) => { 
    store.dispatch(requestStep(stepId)); 
}; 

，因爲你沒有傳遞對象，所以它的簽名是錯誤的。或者，在一個對象傳遞stepId：

onClick= {() => requestStepOnEnter({ stepId })}> 

const test = ({ prop }) => console.log('The value of prop?' , prop); 
 

 
test({ prop: 'works' }); 
 

 
test('doesnt work');

的另一個問題是，我們在調用requestStepOnEnter的說法stepId這是undefined。正確的應該是step.id

---

這裏是一個工作建議

var requestStepOnEnter = (stepId) => { 
    store.dispatch(requestStep(stepId)); 
}; 

const ExperimentDetail = ({ steps }) => (
    <div className="experiment-detail"> 
    { 
     steps.map(step => 
     <NavItem 
     eventKey={step.order} 
     key={step.id} 
     onClick= {() => requestStepOnEnter(step.id)}> 
     {step.order} 
     </NavItem> 
    ) 
    } 
    </div> 
); 

export default ExperimentDetail;