行動不會在按鈕點擊reactjs

Question

我是新來的React。我創建了一個演示應用程序。並且我試圖通過單擊按鈕來隱藏該消息。 1）但是，該操作不會調用按鈕單擊。 2）爲什麼控制檯在減速器內部控制action時顯示如下。這顯示在頁面重新加載。 view page

inside reducer 
redux.js:30 Object {type: "@@redux/INIT"} 
redux.js:31 Object {} 
redux.js:29 inside reducer 
redux.js:30 Object {type: "@@redux/PROBE_UNKNOWN_ACTION_j.r.h.g.s.q.b.y.b.9"} 
redux.js:31 Object {} 
redux.js:29 inside reducer 
redux.js:30 Object {type: "@@redux/INIT"} 
redux.js:31 Object {} 

我的package.json

{ 
    "name": "react-redux-data-flow", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-redux": "^5.0.5", 
    "redux": "^3.7.0", 
    "redux-thunk": "^2.2.0" 
    }, 
    "devDependencies": { 
    "react-scripts": "1.0.7" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

App.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import { initialMessageAction, clickButtonAction } from './redux.js'; 
import { connect } from 'react-redux'; 


class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header">   
     </div> 
     <p className="App-intro"> 
     react-redux-data-flow 
     </p> 
      {this.props.message? <div>hi ..<button onClick={() => this.props.clickButtonAction }>hide message</button></div>: ''} 
     </div> 
    ); 
    } 
} 

// mapStateToProps......................................................................................................... 

    const mapStateToProps = (state, ownProperty) => ({ 

    message:state.geod 

    }); 
//............................................................................................................................... 


// DispatchStateToProps......................................................................................................... 

    const mapDispatchToProps = { 

    // initialMessageAction, 
    clickButtonAction 

    } 

// connect to Store............................................................................................................................... 

    export default connect(
          mapStateToProps, 
          mapDispatchToProps 

        )(App); 

// ..................................................................................................................................................................... 

redux.js

import React from 'react'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 

//actions.js.............................................................................................. 


export const initialMessageAction = (geod) => ({ 

                type:'INITIAL_MESSAGE', 
                geod, 

}); 

export const clickButtonAction =() =>{  
              console.log('inside click button action'); 
              return { 

                 type:'CLICK_MESSAGE', 

                } 
}; 

//......................................................................................................... 

//reducer.js......................................................................................................... 

export const geod = (state ={}, action) => { 
    console.log('inside reducer'); 
    console.log(action); 
    console.log(state) 
    switch(action.type){ 


     case 'INITIAL_MESSAGE': 
       console.log('inside reducer'); 
       return action.geod; 
     case 'CLICK_MESSAGE': 
       return [ 
         ...state, { 
             message: '' 
            } 
         ] 
     default: 
       return state; 
    } 

}; 
//......................................................................................................... 

//reducer.js......................................................................................................... 

    export const reducers = combineReducers({ geod, }); 
//......................................................................................................... 

//store.js......................................................................................................... 

    // export const store = createStore(reducers, applyMiddleware(thunk)); 
//......................................................................................................... 

export function configureStore(initialState = {}) { 
    const store = createStore(
    reducers, 
    initialState, 
    applyMiddleware(thunk) 
) 
    return store; 
}; 

export const store = configureStore(); 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 
// Add these imports - Step 1 
import { Provider } from 'react-redux'; 
import { store } from './redux'; 
// ReactDOM.render(<App />, document.getElementById('root')); 
// registerServiceWorker(); 

// Wrap existing app in Provider - Step 2 
ReactDOM.render( 
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
); 

Answer 1

您的錯誤非常小。在您的線路：

<button onClick={() => this.props.clickButtonAction}>... 

你說是單擊按鈕時，調用，它返回this.props.clickButtonAction功能。您可以通過兩種方式解決這個問題：

<button onClick={this.props.clickButtonAction}>... 

或

<button onClick={() => this.props.clickButtonAction()}>... 

第一個傳遞你要調用（this.props.clickButtonAction）到onClick道具的功能。第二個傳遞一個函數，當被調用時，將調用this.props.clickButtonAction。

使用第一個更好，因爲它更短，並且不會產生額外的不必要的功能，但當您想傳遞自定義參數（onClick={() => innerFuction(customArgument)}）時，第二個解決方案很有用。

Answer 2

1）在按鈕事件處理函數分配微小的錯誤

onClick={() => this.props.clickButtonAction }將簡單地返回回調，什麼也不做

onClick={this.props.clickButtonAction}回調指定爲事件處理程序

2）他們只是看起來像linting警告