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>
      &times;
    </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>" "
            &nbsp;&nbsp;
            <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>
      &times;
    </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>" "
            &nbsp;&nbsp;
            <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 模态提交表单的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中使用父组件中的按钮提交表单

Twitter Bootstrap 模态表单提交

bootstrap模态框中表单怎么提交表单

提交后保持物化 CSS 模态表单打开

阻止模态按钮提交它所在的表单

.NET MVC 模态表单提交