點擊一個按鈕，什麼也不做Reactjs

我將返回一個按鈕元素的成分，和的onClick處理程序將派遣一個終極版動作：點擊一個按鈕，什麼也不做Reactjs

這是按鈕組件：

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

來源

2017-07-06 JSK

你確認'onCli ck'不是通過在該函數中放置一個'console.log'來觸發的？你還可以分享'onClick'功能嗎？ – JonE

是的，這是當我在onClick（'stufff'）之外觸發onClick（'stufff'）的問題，並且我看到我的狀態在redux開發工具中發生變化，所以問題來自按鈕未被點擊 – JSK

您是否在做'e .preventDefault（）;'在函數中？其中'e'是表示事件的第一個參數。 onClick = {（e）=> onClick（e，'300'）}）' – JonE

我想，你缺失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}

//最後出口與您的組件連接的終極版

export default connect ( null, mapDispatchToProps) (UxMenuButton)

我希望，它將幫助你:)

來源

2017-07-10 13:52:34

點擊一個按鈕，什麼也不做Reactjs

回答

相關問題