行动不会在按钮点击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警告