React bootstrap modal 如何在提交值时先发送 post 请求然后关闭模态

Question

我正在 bootstrap 模式中制作表单。当您按下提交时，表单数据应该被 posted 并且模式应该关闭。我的代码结构方式现在模式关闭但我认为我的请求没有足够的时间发出 post 请求，因为它永远不会发送。当我删除 this.props.onHide 表单提交按钮时。请求确实被发送了，显然模态没有关闭。

有人知道我如何发送 Post 请求并关闭模式吗？

打开模式的按钮：

export default function SidenavButtons(props) {
    const [modalShow, setModalShow] = React.useState(false);

    return (
        <React.Fragment>
                    <a class="dropdown-item" onClick={() => setModalShow(true)}>{props.usage}</a>
            <CreateServiceModal
                show={modalShow}
                onHide={() => setModalShow(false)}
                modelUsage= {props.usage}
            />
        </React.Fragment>
    )
}

模态页脚 --> 提交按钮：

                               <Modal.Footer>
                                    <Mutation mutation={POST_MUTATION}
                                        variables={{ cost, name, description, hours, minutes }}>

                                        {postMutation =>
                                            <button onClick={postMutation , this.props.onHide}>Submit</button>

                                        }
                                    </Mutation>
                                </Modal.Footer>

Answer 1

要在单击一次按钮时调用多个函数，只需使用内联箭头函数并调用由 ;

分隔的收藏函数

{
  (postMutation) => (
    <button onClick={() => {postMutation(); this.props.onHide()}}>Submit</button>
  );
}

React bootstrap modal 如何在提交值时先发送 post 请求然后关闭模态

React bootstrap modal how to send post request first and then close modal when submitting values

post

modal-dialog

submit

bootstrap-modal

reactjs