Question

我有一个返回按钮元素的组件，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>
  );
};

现在的问题是，当我点击这个button时，没有任何反应，按钮似乎根本无法点击，当我在返回之外触发onClick功能时我可以清楚地看到看看redux dev工具中的状态变化，这意味着问题来自于没有触发onClick处理程序的按钮，我在这里缺少什么？

父组件如下所示：

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

这就是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,
    }),
};

Answer 1

我认为，您缺少 onClick 功能。你可以像这样重写：

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> ); }; const mapDispatchToProps = {onClick： onClick的功能 }

//使用 Redux

的连接最终导出您的组件

export default connect ( null, mapDispatchToProps) (UxMenuButton )

我希望，它会帮助你:)。

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

1 个答案: