Question

我的最终表格有疑问。我有一个带有react-final-form的Modal，并希望使用该模式脚注中的按钮提交该表单。提交按钮具有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>
                    )}
               />

Answer 1

据我所知，onSubmit是表单标签的一种支持，而不是按钮标签。您应该改用onClick。

Answer 2

我知道这可能已经解决了，因为此问题已有2年之久了。

但是要解决此问题，您需要将Modal包含在Form组件内部，但要在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>
    )}
/>

从模态提交最终表格

2 个答案: