添加计数器以显示p标签中的按钮被点击了多少次

Question

因此，基本上我需要做的是在输入上方创建一个p标签，该标签显示“已按下递增/递减按钮的次数：”并列出数字。我已经编写了所有内容，但是那是因为我不知道如何将其添加到我的代码中，并且需要你们的一些帮助。我将包含以App.js开头的文件

import React from 'react';
import Counter from './Counter';
import { connect } from 'react-redux';
import { increment, decrement, reset, inputNumber, inputNumberChange } from '../actions/index';

class App extends React.Component {
  render() {
    return (
      <div>
        <h3>Counter</h3>
        <Counter count={this.props.count} onIncrement={this.props.onIncrement} onDecrement={this.props.onDecrement} onReset={this.props.onReset}
        onInputNumber={this.props.onInputNumber} onInputNumberChange={this.props.onInputNumberChange} />
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onIncrement: () => dispatch(increment()),
    onDecrement: () => dispatch(decrement()),
    onReset: () => dispatch(reset()),
    onInputNumber: () => dispatch(inputNumber()),
    onInputNumberChange: (number) => dispatch(inputNumberChange(number))
  };
}
function mapStateToProps(state) {
    return {
      count: state.count,
      numberInputted: state.numberInputted
    };
  }

export default connect(mapStateToProps, mapDispatchToProps)(App);

这是下一个文档index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './components/App';
import reducer from './reducers/counter';

const store = createStore(
  reducer,
  undefined,
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

我在/ actions中的下一个文档index.js

export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

export const reset = () => ({
  type: 'RESET'
});

export const inputNumber = () => ({
  type: 'INPUT_NUMBER'
});

export const inputNumberChange = (number) => ({
  type: 'INPUT_NUMBER_CHANGE',
  number
});

下一个文档counter.js

const initialState = {
  count: 0,
  numberInputted: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    case 'RESET':
      return {
        ...state,
        count: (state.count = 0)
      };
    case 'INPUT_NUMBER':
      return {
        ...state,
        count: parseInt(state.numberInputted),
        numberInputted: null
      };
    case 'INPUT_NUMBER_CHANGE':
      return {
        ...state,
        numberInputted: action.number
      }
    default:
      return state;
  }
}

export default counterReducer;

下一文档Counter.js

import React from 'react';

const Counter = ({ count, onDecrement, onIncrement, onReset, onInputNumberChange, numberInputted, onInputNumber }) => {

    return (
      <div>
        <div>
          <button onClick={onDecrement}>-</button>
          <span>{count}</span>
          <button onClick={onIncrement}>+</button>
          <br />
          <button onClick={onReset}>Reset</button>
          <br />
          <input type='text' onChange={event => onInputNumberChange(event.target.value)} value={numberInputted} />
          <button onClick={onInputNumber}>Change Count</button>
        </div>
      </div>
    );
}


export default Counter;

很抱歉，我的代码太长了，但是我们必须遵循一定的准则，包括可以使用多少个组件等等。我所缺少的只是我的计数器，单击了增加/减少按钮多少次。