クリックReactjs

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をクリックすると、何も起こりません、ボタンがクリック可能ではないように見えます。そして、私がreturnxの外で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 fucntionです：

このアクションの作成者を呼び出し

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機能。 それは、私が期待しexport default connect ( null, mapDispatchToProps) (UxMenuButton)

Reduxの の

を接続しての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：あなたはこのように書き換えることができますあなたに役立つでしょう:)