如何隐藏使用 Preventdefault() 的 React-Bootstrap 模态表单

2020-05-21 08:00:00 · 飞浪

介绍 ReactBootstrap是一个出色的库，它使您可以灵活地在react-bootstrap组件API之上编写代码。这些组件有许多props，可用于扩展默认功能并允许您将应用程序逻

介绍

React Bootstrap 是一个出色的库，它使您可以灵活地在react-bootstrap组件 API之上编写代码。这些组件有许多 props，可用于扩展默认功能并允许您将应用程序逻辑绑定到其中。

例如，假设您想添加一段代码来跟踪用户与模态框交互时的行为。您可以使用 show和onHide属性来显示模态框并在模态框隐藏时运行回调。本指南将解释如何执行非常简单明了的操作：当模态框中的表单提交时，您将隐藏模态框。

从 react-bootstrap 导入组件

第一步是从react-bootstrap库导入所有相关组件。您将需要<Modal />、<Button />和<Form />组件。不要忘记导入 bootstrap css 文件以应用样式。

      import React from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
    

设置模态组件

在App组件内，添加一个打开模式的按钮。

      function App() {
  return (
    <div
      className="d-flex align-items-center justify-content-center"
      style={{ height: "100vh" }}
    >
      <Button variant="primary" onClick={handleShow}>
        Launch Form modal
      </Button>
    </div>
  );
}
    

在handleShow()函数中，将布尔状态值设置为 true 并使用它来显示或触发模态。

      function App() {
  const [show, setShow] = useState(false);

  const handleShow = () => setShow(true);

  return (
    <div
      className="d-flex align-items-center justify-content-center"
      style={{ height: "100vh" }}
    >
      <Button variant="primary" onClick={handleShow}>
        Launch Form modal
      </Button>
    </div>
  );
}
    

现在，在按钮后添加Modal组件。

      function App() {
  const [show, setShow] = useState(false);

  const handleShow = () => setShow(true);

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch Form modal
        </Button>
      </div>
      <Modal show={show}>
        <Modal.Header closeButton>
          <Modal.Title>Login Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <></>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close Modal</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
    

将显示状态变量传递给Modal组件的show属性，以控制模态行为。在handleClose()函数中，将显示状态设置为false以关闭模态。

构建登录表单

在本演示中，您将创建一个登录表单。因此，创建一个<LoginForm />组件并在模态主体内调用它。

      const LoginForm = () => {
  return (
    <Form>
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Remember Me!" />
      </Form.Group>
      <Button variant="primary" type="submit" block>
        Login
      </Button>
    </Form>
  );
};
    

<LoginForm />组件还需要接受一个在表单提交时执行的回调 prop，以便它可以在<App />组件中将显示状态变量设置为 false 。

      const LoginForm = ({ onSubmit }) => {
  return <Form onSubmit={onSubmit}>{/* ... */}</Form>;
};
    

使用useState钩子，创建电子邮件和密码状态变量来控制表单值，然后将变量传递给相应<Form.Control />组件的值prop 。

      const LoginForm = ({ onSubmit }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <Form onSubmit={onSubmit}>
      {/*...*/}
      <Form.Control
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      {/*...*/}
      {/*...*/}
      <Form.Control
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {/*...*/}
    </Form>
  );
};
    

一旦<LoginForm />组件准备就绪，就在<Modal.Body />组件内呈现它。

      <Modal show={show}>
  {/* ... */}
  <Modal.Body>
    <LoginForm onSubmit={onLoginFormSubmit} />
  </Modal.Body>
  {/* ... */}
</Modal>
    

处理 onSubmit() 操作

如上所示，onLoginFormSubmit函数引用被传递给LoginForm组件的onSubmit属性。因此在onLoginFormSubmit函数中，第一行将阻止默认行为，即阻止表单提交。

      const onLoginFormSubmit = (e) => {
  e.preventDefault();
  // ...
};
    

现在，您需要关闭模态框，而不是提交表单。创建另一个辅助函数handleClose ，它与handleShow函数类似，但handleClose函数不会将显示状态变量设置为 true，而是会将显示变量设置为 false。

      const handleClose = () => setShow(false);
    

要关闭模式，只需调用onLoginFormSubmit()函数体中的handleClose()函数。

      const onLoginFormSubmit = (e) => {
  e.preventDefault();
  handleClose();
};
    

就这样！现在，仍然有几个地方需要在Modal组件中使用handleClose函数。

      <Modal show={show} onHide={handleClose}>
  {/* ... */}
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
      Close Modal
    </Button>
  </Modal.Footer>
</Modal>
    

完整源代码

在本节中，您可以找到完整的源代码以供参考。

      import React, { useState } from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";

const LoginForm = ({ onSubmit }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <Form onSubmit={onSubmit}>
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </Form.Group>
      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Remember Me!" />
      </Form.Group>
      <Button variant="primary" type="submit" block>
        Login
      </Button>
    </Form>
  );
};

export default function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const onLoginFormSubmit = (e) => {
    e.preventDefault();
    handleClose();
  };

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch Form modal
        </Button>
      </div>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Login Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <LoginForm onSubmit={onLoginFormSubmit} />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close Modal
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
    <

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何隐藏使用 Preventdefault() 的 React-Bootstrap 模态表单

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

function App() { return ( <div className="d-flex align-items-center justify-content-center" style={{ height: "100vh" }} > <Button variant="primary" onClick={handleShow}> Launch Form modal </Button> </div> ); }

function App() { const [show, setShow] = useState(false); const handleShow = () => setShow(true); return ( <div className="d-flex align-items-center justify-content-center" style={{ height: "100vh" }} > <Button variant="primary" onClick={handleShow}> Launch Form modal </Button> </div> ); }

const LoginForm = () => { return ( <Form> <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" /> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Form.Group controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Remember Me!" /> </Form.Group> <Button variant="primary" type="submit" block> Login </Button> </Form> ); };

const LoginForm = ({ onSubmit }) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( <Form onSubmit={onSubmit}> {/*...*/} <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} /> {/*...*/} {/*...*/} <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> {/*...*/} </Form> ); };

import React, { useState } from "react"; import { Modal, Button, Form } from "react-bootstrap"; import "./styles.css"; import "bootstrap/dist/css/bootstrap.css"; const LoginForm = ({ onSubmit }) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( <Form onSubmit={onSubmit}> <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} /> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> </Form.Group> <Form.Group controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Remember Me!" /> </Form.Group> <Button variant="primary" type="submit" block> Login </Button> </Form> ); }; export default function App() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); const onLoginFormSubmit = (e) => { e.preventDefault(); handleClose(); }; return ( <> <div className="d-flex align-items-center justify-content-center" style={{ height: "100vh" }} > <Button variant="primary" onClick={handleShow}> Launch Form modal </Button> </div> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Login Form</Modal.Title> </Modal.Header> <Modal.Body> <LoginForm onSubmit={onLoginFormSubmit} /> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close Modal </Button> </Modal.Footer> </Modal> </> ); } <