Redux-form get event in submit handler function

Question

Next to my redux forms I've a small sidebar with form names to switch between different forms. To keep the app state updated anytime when a user switch between these forms via the sidebar I do a submission of the current form state via the redux-form handleSubmit function. The submission is fired with a dispatch which updates the app state. This works fine but to make the clicked form visible I need to change the 'active' value in my state to the name of the form, this name is set on the list item in the sidebar items loop as a classname.

I tried to receive the clicked element classname via event.target.className but it seems to have no results as event seems not to be the event I expected. How can I access the event in a handleSubmit mission to change the active form with the clicked className of list item of the sidebar?

ps I will create a separated function, if / else statement or something else for this saveData function as I know the event.target.className won't be correct if the form would be submitted by the form button itself.

Example code

... some form field code

class ComponentName extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            someName : this.props.someName,
        }

        this.saveData = this.saveData.bind(this);
    }

    saveData(values, dispatch) {

        let newState = {
            SomeName : update(this.state.someName, {
                active : {
                    $set : this.state.active <======= event.target.className ?
                },
                rows : {
                    data : {
                        $set : values.rows
                    }
                }
            })
        }

        this.setState(newState);

        dispatch(someActionNAme(newState.someName));

    }


    render() {

        const { handleSubmit, submitting } = this.props;

        var items = {}
        Object.values(this.state.someName).map(function(item, i) {
            if (typeof item == 'object' && item !== 'undefined' && item !== null) {
                items[i] = item;
            }
        })

        return (
            <div className="someName__form">

                <form onSubmit={handleSubmit(this.saveData)}>

                    <ul className="someName__sidebar">
                        { Object.keys(items).map((item, i) => (
                                <li
                                    key={i}
                                    data-id={i}
                                    onClick={handleSubmit(this.saveData)}
                                    id={items[item].meta.name}
                                    className={items[item].meta.name}
                                    data-sort={items[item].meta.sort}
                                >

                                    {items[item].meta.label}

                                    {this.state.someName.active == items[item].meta.name &&
                                    <b>
                                        &nbsp; [Active]
                                    </b>
                                    }

                                </li>
                            )
                        )}
                    </ul>

                    <FieldArray name="rows" component={renderRows} />

                    <div>
                        <button id="button" type="submit" disabled={submitting} onClick={handleSubmit(this.saveData)}>
                            Save
                        </button>
                    </div>

                </form>


            </div>
        )

    }
}

const mapStateToProps = (state) => ({
    initialValues : state.someName.rows,
    someName : state.someName,
});

const mapDispatchToProps = (dispatch) => ({
    dispatch,
});

ComponentName = reduxForm({
    form : 'formName',
    destroyOnUnmount: false
})(ComponentName);

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

Answer 1

To help others out, I found myself the solution by diving deep into the github issue articles of redux-form.

It's easy and possible to add some additional data to the form values via the handleSubmit function. By adding data as below, the additional data will be merged into the object with the values as follow.

...onClick={handleSubmit(values => this.saveData({...values, active: 'componentName' }))}

Values object will now contain an extra key value pair:

{
  "languages": [
    {
      "name": "Spanish",
      "level": "3"
    }
  ],
  "active": "componentName"
}