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;