パラメータでカスタム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を渡す：

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

 
test({ prop: 'works' }); 
 

 
test('doesnt work');

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

はもう一つの問題は、あなたが undefinedある引数 stepIdで requestStepOnEnterを呼んでいるということでしょう。正しいここ 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; 

です