Как отменить обновление страницы при post запросе на json-server?

Question

[Айзек Юий]

Использую форму из antd
пробовал использовать e.preventDefault() не помогает

Comments

[Denis Masson]

Дайте код отправки формы) и обработчик нажатия

[Айзек Юий]

Denis Masson,

import React from 'react';
import { Modal, Form, Input, Select, Button, Slider, InputNumber } from 'antd';

const EditFavoriteModal = ({
    state, modalPopup, handleSubmit, 
    request_value, title_value,
    sort_variant, videos_number
}) => {

    const [slider, setSlider] = React.useState(videos_number ? videos_number : null)

    let onChange = value => {
        setSlider(value)
    };

    let onFinish = value => {
        handleSubmit(slider, value)
    }

    return (
        <div>
            <Modal
                title="Изменить запрос"
                centered
                visible={state}
            >
                <Form
                    name="basic"
                    className="login_form"
                    labelCol={{
                        span: 100,
                    }}
                    wrapperCol={{
                        span: 100,
                    }}
                    initialValues={{
                        request: request_value,
                        title: title_value
                    }}
                    handleSubmit={e => {
                        e.preventDefault()
                    }}
                    onFinish={onFinish}
                    >
                    <Form.Item
                        label="Запрос"
                        name="request"
                        rules={[
                            {
                                required: true,
                                message: 'Пожалуйста введите запрос',
                            },
                            ]}
                    >
                        <Input placeholder="Укажите запрос" />
                    </Form.Item>

                    <Form.Item
                        label="Название"
                        name="title"
                        rules={[
                            {
                                required: true,
                                message: 'Пожалуйста введите название',
                            },
                            ]}
                    >
                        <Input placeholder="Укажите название" />
                    </Form.Item>

                    <Form.Item
                        label="Сортировать по"
                        name="sort"
                    >
                        <Select defaultValue={sort_variant} placeholder="Без сортировки" style={{ width: "100%" }}>
                            <Select.Option value="date">Дате</Select.Option>
                            <Select.Option value="rating">Популярности</Select.Option>
                            <Select.Option value="title">Алфовиту</Select.Option>
                            <Select.Option value="videoCount">Колличеству видео на канале</Select.Option>
                            <Select.Option value="viewCount">Просмотрам</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="Максимальное колличество"
                    >
                        <Slider
                            min={0}
                            max={50}
                            onChange={onChange}
                            value={slider}
                        />
                        <InputNumber
                                min={0}
                                max={50}
                                value={slider}
                                onChange={onChange}
                            />
                    </Form.Item>

                    <div className="form-footer">
                        <Form.Item
                            wrapperCol={{
                            offset: 100,
                            span: 100,
                            }}
                        >
                            <Button onClick={modalPopup}>
                                Не сохранять
                            </Button>
                            <Button type="primary" htmlType="submit">
                                Сохранить
                            </Button>
                        </Form.Item>
                    </div>
                </Form>
            </Modal>
        </div>
    )
}

export default EditFavoriteModal;

Answer 1

[Denis Masson]

Попробуйте в Вашу кнопку отправки формы добавить onClick={onFinish}

А в Самом onFinish, отловить событие и использовать preventdefault

<Button type="primary" htmlType="submit" onClick={onFinish}>
     Сохранить
</Button>