0

Есть некоторая страница в приложении 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, если их всё равно нет?

2 ответа 2

0

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

Перенёс onSubmit в action creators

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

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

onSubmit={this.props.onSubmit}
0

У вас 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);
}

1
  • гм, да я вроде биндил - но уговорили, попробую ещё раз завтра глянуть.
    – A K
    31 окт 2021 в 18:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.