Перезагрузка формы при отправке. React

Question

У меня есть инпут куда вбивается штрих-код элемента и рядом есть выбор периода.

У поля штрих кода нету кнопки (это форма которая отправляется при клике на клавишу Enter). У формы есть аттрибут onSubmit который вызывают функцию получения данных с базы.

                        <Form
                            onSubmit={date =>
                                this.onChangeDate(
                                    date[0],
                                    date[1],
                                    this.state.barcode
                                )
                            }
                            onSubmit={e => {
                                // e.preventDefault()
                            }}
                            style={{
                                marginRight: '15px',
                                maxWidth: '300px',
                                width: '100%'
                            }}>
                            <Input
                                className={'barcode'}
                                type={'text'}
                                style={{
                                    maxWidth: '300px'
                                    // marginRight: "15px"
                                }}
                                placeholder={'Введите штрих-код'}
                            />
                        </Form>

При отправке формы работает данная функция

    onChangeDate(dateFrom, dateTo, barcode) {
        if (!dateFrom && !dateTo) {
            dateFrom = moment();
            dateTo = moment();
        }
        barcode = document.querySelector('.barcode').value;
        localStorage.setItem(
            'date_list',
            `${dateFrom.format()}zzz${dateTo.format()}`
        );
        this.getList(
            dateFrom.format(DATE_FORMAT),
            dateTo.format(DATE_FORMAT),
            barcode
        );
        this.setState({
            dateFrom,
            dateTo,
            barcode
        });
    }

Мне надо сделать чтобы при отправке формы функция срабатывала но страница не перезагружалась. Как это сделать? Если сбросить event, то форма вообще не отправляется.

Answer 1

в React нельзя вешать обработчики DOM событий на компоненте при его использовании. все методы/свойства, которые Вы задаете в компоненте (в Вашем случае это onSubmit и style), передаются в компонент <Form> исключительно как props-ы.

таким образом, Ваша страница перезагружается, потому что у Вас (скорее всего) компонент <Form /> содержит в себе нативную <form>, которая и перезагружает страницу. и у этой <form> не задан ни один обработчик события на onSubmit.

решение: внутри компонента <Form> получите Ваш this.props.onSubmit (которые Вы передаете в <Form /> через props) и повесьте этот props как обработчик для нативной <form onSubmit={this.props.onSubmit}>. и не забудьте добавить e.preventDefault()

БЛОГ НА HUSL

Перезагрузка формы при отправке. React

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