Реагировать пользовательское событие onClick с параметром

Question

Я бы хотел, чтобы пользовательское событие onClick запускалось в любое время, когда был выбран один из моих, однако я не могу правильно передать step.id. stepId не определено, когда я пытаюсь отправить requestStep. Есть предположения?

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;