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;

使用参数反应自定义onClick事件

1 个答案: