Javascript 在Reactjs中单击按钮不执行任何操作

我有一个组件将返回一个按钮元素，onClick处理程序将发送一个redux操作：

这是按钮组件：

const UxMenuButton = ({children, currentView, defaultTab = false, imgUrl = null, onClick, type = 'submit'}) => {
  return (
    <button className={`ux-btn btn btn-default btn-lg ${defaultTab ? 'apply-dashed' : ''}`} onClick={() => onClick('300')} style={colorSwitcher(currentView)} type={type}>
      {children}
    </button>
  );
};

这就是onClick功能：

const mapDispatchToProps = (dispatch) => ({changeTopPosition: (top) => dispatch(menuActions.changeTopPosition(top))})

将此操作称为创建者：

export const menuActions = {
    CHANGE_TOP_POSITION: 'CHANGE_TOP_POSITION',

    changeTopPosition: data => ({
        type: menuActions.CHANGE_TOP_POSITION,
        payload: data,
    }),
};

我认为，您缺少单击功能。您可以这样重写：

  {item.tabs.map((tab, index) => {
    return (
      <div key={index + 25} className="col-md-3 text-center">
        <UxMenuButton onClick={changeTopPosition}>{tab.id}</UxMenuButton>
      </div>
    );
  })}

const UxMenuButton = ({
  children,
  currentView,
  defaultTab = false,
  imgUrl = null,
  onClick,
  type = 'submit'
}) => {
  return (
    <button
      className={`ux-btn btn btn-default btn-lg ${defaultTab ? 'apply-dashed' : ''}`}
      onClick={() => onClick('300')}
      style={colorSwitcher(currentView)}
      type={type}
    >
      {children}
    </button>
  );
};

---

我希望，它会对您有所帮助：）

您是否通过在该功能中放置

控制台.log

来确认

onClick

没有启动？您还可以共享

onClick

函数吗？是的，这是当我在返回外部触发onClick（'stuff'）时的问题，它完成了工作，并且我在redux开发工具中看到我的状态更改，因此问题来自您在执行

e.preventDefault（）时未单击的按钮在函数中？其中
e
是表示事件的第一个参数
onClick={（e）=>onClick（e，'300'）}
我没有在任何地方使用preventDefault。我们可以看到
changetoposition
函数吗？
//final export your component with <b>connect</b> of <b>Redux</b>

export default connect (
   null, mapDispatchToProps) (UxMenuButton )