Отправить окончательную форму из модального окна

У меня проблема с моей окончательной формой. У меня есть модальное окно с конечной формой реакции, и я хотел бы отправить форму с помощью кнопки, которая находится в нижнем колонтитуле модального окна. Кнопка «Отправить» имеет событие onSubmit, когда я нажал на эту кнопку, я увидел, что моя функция onSubmit не работает. Он срабатывает, когда я нажимаю кнопку, которая открывает модальное окно .... Что здесь не так?

Advert.js

class Advert extends React.Component {
showLoginMenu = (e) => {
   e.preventDefault();
this.props.loadModal(LOGIN_MODAL);
};
....
 <button onClick={this.showLoginMenu.bind(this)}>Order</button>
}

Modal.js

<Modal onClose={this.onClose.bind(this)}>
               <Form
                    onSubmit={this.onSubmit}
                    initialValues={initValues}
                    decorators={[calculator]}
                    render={({handleSubmit}) => (
                        <form onSubmit={handleSubmit}>
                           <some fields>
                               <button type="submit" onSubmit= 
                               {this.onSubmit}>Order</button>
                        </form>
                    )}
               />

reactjs modal-dialog submit final-form
person Audi Quattro 1992    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Насколько мне известно, onSubmit - это опора тега формы, а не тега кнопки. Вместо этого вы должны использовать onClick.

person Renan Bandeira    schedule 02.08.2018
comment
У меня есть аналогичная страница с отзывами, но с отзывами на Submit работает нормально. Успешно добавляю обзор. Код похож на этот, но этот модальный делает, что он идет не так ... Я не понимаю, почему - person Audi Quattro 1992; 04.08.2018
comment
У меня точно такая же проблема, если я помещаю компонент формы в обычный родительский компонент, он работает нормально, но если я помещаю форму внутри модального окна, он не работает, я не знаю, почему он так себя ведет. - person Bilal; 31.05.2019

arrow_upward
0
arrow_downward

Я знаю, что это, вероятно, уже решено, так как этой проблеме около 2 лет.

Но чтобы решить эту проблему, вам нужно включить Modal внутри компонента Form, но перед тегом формы.

<Form
    onSubmit={this.onSubmit}
    initialValues={initValues}
    decorators={[calculator]}
    render={({handleSubmit}) => (
        <Modal onClose={this.onClose.bind(this)}>
            <form onSubmit={handleSubmit}>
                <button type="submit" onSubmit={this.onSubmit}>Order</button>
            </form>
         <Modal>
    )}
/>
person Richard Hpa    schedule 07.10.2020