ChangeMonthFeeForm.js

import React from "react";
import {connect} from "react-redux";
import {changeMonthFeeWasFinished, changeMonthFeeWasCancelled} from "./monthDucks";

/**
 * component
 */
export const ChangeMonthFeeForm = ({month, submit, reset}) => {
    let fee;

    function onSubmit(e) {
        e.preventDefault();
        if (fee.value) {
            submit(fee.value);
        }
    }

    function onReset(e) {
        e.preventDefault();
        reset();
    }

    return (
        <form onSubmit={onSubmit} className="form-inline">
            <input
                ref={node => fee = node}
                type="text"
                className="form-control"
                placeholder="Betrag"
                defaultValue={month.amount}
            />

            <button className="btn btn-primary" onClick={onSubmit}>
                <span className="glyphicon glyphicon-ok-sign"/>
            </button>

            <button className="btn btn-danger" onClick={onReset}>
                <span className="glyphicon glyphicon-remove"/>
            </button>
        </form>
    );
};

function mapDispatchToProps(dispatch) {
    return {
        submit: function(fee) {
            dispatch(changeMonthFeeWasFinished(fee))
        },
        reset: function() {
            dispatch(changeMonthFeeWasCancelled())
        }
    }
}

/**
 * container
 */
export default connect(null, mapDispatchToProps)(ChangeMonthFeeForm);