动作不会调用 reactjs 中的按钮单击

Question

我是 React 的新手。我创建了一个演示应用程序。我试图在单击按钮时隐藏消息。1）但该操作不会调用按钮单击。2）以及为什么控制台action在减速器内部时控制台显示如下。这在页面重新加载时显示。 查看页面

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"
  }
}

应用程序.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(); 

索引.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)传递给onClickprop。第二个传递一个函数，当被调用时，将调用this.props.clickButtonAction.

最好使用第一个，因为它更短并且不会创建额外的不必要的函数，但是当您想要传递自定义参数 ( onClick={() => innerFuction(customArgument)})时，第二个解决方案很有用。