React 模态提交表单
Posted
技术标签:
【中文标题】React 模态提交表单【英文标题】:React Modal Submit Form 【发布时间】:2021-01-09 06:01:09 【问题描述】:每当提交按钮单击我的 reactstrap 模式时,我试图打印出一个简单的按钮单击文本,但不知何故,我的代码没有做任何事情,不确定我有什么问题。 为了更好的可视化,我附上了一张图片,我正在使用 reactstrap Modal。
import React, useState from "react";
import Modal, ModalHeader, ModalBody, ModalFooter from "reactstrap";
import Button from "./Button";
// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.
const ModalComponent = (props) =>
const
buttonText,
title,
actionButtonText,
cancelButtonText,
children,
className,
= props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const alertshow = () =>
alert("button clicked");
;
const closeBtn = (
<button className="close" onClick=toggle>
×
</button>
);
return (
<div>
<a className="btn_link" onClick=toggle>
buttonText
</a>
<form onSubmit=alertshow>
<Modal isOpen=modal toggle=toggle className=className>
<ModalHeader className=" border-0" toggle=toggle close=closeBtn>
title
</ModalHeader>
<ModalBody className="text-left border-0">
<p className="modal-label">Please enter your email address</p>
children
</ModalBody>
<ModalFooter className="modal-footer border-0">
<Button className="btn_secondary modal-btn" onClick=toggle>
cancelButtonText
</Button>" "
<input
className="btn btn_primary modal-btn"
type="submit"
value=actionButtonText
/>
</ModalFooter>
</Modal>
</form>
</div>
);
;
export default ModalComponent;
【问题讨论】:
【参考方案1】:它发生在form should be part of modal
而不是modal should be part of form
。这就是它不引用onSubmit
的原因。你需要这样做:
<Modal isOpen=modal toggle=toggle className=className>
<form onSubmit=alertshow>
...rest all content
</Form>
</Modal>
这里是完整的代码:
import React, useState from "react";
import "./styles.css";
import Modal, ModalHeader, ModalBody, ModalFooter, Button from "reactstrap";
// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.
const ModalComponent = (props) =>
const
buttonText,
title,
actionButtonText,
cancelButtonText,
children,
className
= props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const alertshow = () =>
alert("button clicked");
;
const closeBtn = (
<button className="close" onClick=toggle>
×
</button>
);
return (
<div>
<div onClick=toggle>buttonText</div>
<Modal isOpen=modal toggle=toggle className=className>
<form onSubmit=alertshow>
<ModalHeader className=" border-0" toggle=toggle close=closeBtn>
title
</ModalHeader>
<ModalBody className="text-left border-0">
<p className="modal-label">Please enter your email address</p>
children
</ModalBody>
<ModalFooter className="modal-footer border-0">
<Button className="btn_secondary modal-btn" onClick=toggle>
cancelButtonText
</Button>" "
<input
className="btn btn_primary modal-btn"
type="submit"
value=actionButtonText
/>
</ModalFooter>
</form>
</Modal>
</div>
);
;
export default function App()
return (
<div className="App">
<ModalComponent
title="Hello"
cancelButtonText="Cancel"
actionButtonText="Submit"
buttonText="testing"
/>
</div>
);
这里是演示:https://codesandbox.io/s/fervent-bash-51lxe?file=/src/App.js:0-1826
【讨论】:
以上是关于React 模态提交表单的主要内容,如果未能解决你的问题,请参考以下文章