reactjs - 从模态提交最终表格

Question

我的最终表格有问题。我有一个带有 react-final-form 的模态框，并希望使用模态框页脚中的按钮提交表单。提交按钮有 onSubmit 事件，当我单击此按钮时，我看到我的 onSubmit 函数不起作用。当我单击打开模式的按钮时，它会起作用....这里出了什么问题？

广告.js

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

模态.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>
                    )}
               />

Answer 1

据我所知，onSubmit 是表单标签的道具，而不是按钮标签。您应该改用 onClick 。

Answer 2

我知道这可能已经解决了，因为这个问题大约有 2 年的历史了。

但是要解决这个问题，您需要在 Form 组件中包含 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>
    )}
/>