使用参数反应自定义 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;

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

React custom onClick event with parameter

reactjs

react-jsx

react-native

react-redux