Вызов action из final form при onSubmit

Question

Есть некоторая страница в приложении react.js с final form. Все формы работают, но там не было такого момента, что при сабмите формы понадобилось вдруг вызвать один из экшенов redux.

private renderFilters() {
    return (
        <Form
            onSubmit={this.onSubmit}
            render={({ handleSubmit, values }) => {
                return (
                    <form onSubmit={handleSubmit} className="form-inline">
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                );
            }}/>
    );
}

....

private onSubmit(values: Filter) {
    this.props.filterChanded(values);
}

И при запуске приложения получил ошибку:

TypeError: Cannot read properties of undefined (reading 'props')

Мммм... И как тогда получить доступ к this.props в приложении? Нашёл только упоминание, что форме важно только то, что onSubmit должен вернуть промис, но не понимаю, как внутрь промиса прокинуть this.props, если их всё равно нет?

Answer 1

Не знаю, насколько это react way - сделал так:

Перенёс onSubmit в action creators

export const actionCreators = {
    onSubmit: (filter: Filter): AppThunkAction<KnownAction> => async (dispatch, getState) => {
        ...
    },

и вызвал оттуда:

onSubmit={this.props.onSubmit}

Answer 2

У вас this теряется при обработке события, необходимо биндить this.onSubmit.bind(this) или обернуть в стрелочную ф-ю ()=>this.onSubmit()

обработка событий React

private renderFilters() {
    return (
        <Form
            onSubmit={this.onSubmit.bind(this)} //биндить надо
            render={({ handleSubmit, values }) => {
                return (
                    <form onSubmit={handleSubmit} className="form-inline">
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                );
            }}/>
    );
}

....

private onSubmit(values: Filter) {
    this.props.filterChanded(values);
}

БЛОГ НА HUSL

Вызов action из final form при onSubmit

Ответы (2 шт):