Xác thực phương thức phản ứng-bootstrap

Đó là nó từ hướng dẫn này. Bạn có thể tiếp tục học hỏi điều này và thay vì chỉ đóng phương thức, bạn có thể thực hiện những việc khác như chuyển các giá trị biểu mẫu tới máy chủ của mình, thêm chức năng theo dõi, v.v. Là nhà phát triển JavaScript, bạn phải hiểu cách sử dụng lệnh gọi lại và bổ sung các chức năng bổ sung thay vì hành vi mặc định—trong trường hợp này là đóng phương thức khi gửi biểu mẫu

Trong Giai đoạn 4 của tôi tại Trường Flatiron, tôi đã gặp React lần đầu tiên và bị choáng ngợp bởi sự đa dạng cũng như chức năng của nó. Tương tự như Vanilla Javascript với Bootstrap để giúp tạo kiểu, React cũng có React-Bootstrap, tạo các thành phần từ đầu như một thành phần React thực sự. React-Bootstrap Modal Forms được sử dụng khá phổ biến trong các ứng dụng front-end. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách

• Cài đặt React-Bootstrap
• Nhập các thành phần React-Bootstrap
• Hiện/Ẩn Modal Form
• Áp dụng CSS cơ bản trên Modal Form

Bây giờ, hãy bắt đâù

Cài đặt React-Bootstrap

Có hai cách để cài đặt React-Bootstrap, nhưng tôi thích sử dụng cách đầu tiên hơn

npm i react-bootstrap bootstrap
# or
yarn add react-bootstrap bootstrap

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhập các thành phần React-Bootstrap

Trước hết, Thành phần Phương thức là gì?

Bây giờ, hãy nhập Thành phần phương thức của chúng tôi từ React-Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Một Modal có 3 phần cơ bản. Đầu trang, Nội dung, Chân trang. Mỗi phần (hoặc thành phần phụ) chứa thông tin chúng tôi muốn hiển thị trên DOM của chúng tôi

Để khai báo một thành phần con cụ thể của Modals, chúng ta có thể sử dụng

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hoặc chúng ta cũng có thể khai báo từng thành phần con bằng cách nhập riêng chúng từ React-Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/ModalHeader";
import ModalFooter from "react-bootstrap/ModalFooter";
import ModalTitle from "react-bootstrap/ModalTitle";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thành phần ModalForm của chúng tôi sẽ được thay đổi thành này

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <ModalHeader closeButton>
        <ModalTitle>Modal headingModalTitle>
      ModalHeader>
      <ModalBody>
        Woohoo, you're reading this text in a modal!
      ModalBody>
      <ModalFooter>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      ModalFooter>
    Modal>
  )
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vậy là chúng ta đã hoàn thành phần khung cơ bản của Modal Component. Thời gian để làm cho nó tương tác hơn

Hiện/Ẩn Modal Form

Biểu mẫu phương thức được hiển thị/ẩn khỏi giao diện người dùng bằng cách sử dụng thuộc tính

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Trong

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

class App extends React.Component {
 state = {
    isOpen: true
 }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đặt trạng thái ban đầu của isOpen thành false cho biết ModalForm của chúng tôi chưa được kích hoạt và đúng với biểu mẫu đã kích hoạt

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tôi đã khai báo 3 chức năng.

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Bây giờ, hãy thêm các thành phần phụ Biểu mẫu của chúng ta vào ModalForm để biến nó thành một biểu mẫu bên trong phương thức của chúng ta

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong thành phần ModalForm, tôi đã thêm trạng thái ban đầu của tên và đặt thành null, giá trị đầu vào của biểu mẫu của chúng tôi được lưu trữ ở trạng thái này. Thuộc tính

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

Đối với các thành phần phụ Biểu mẫu mới được thêm của chúng tôi, tôi đã thêm thuộc tính

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

Áp dụng CSS cơ bản trên Modal Form

Áp dụng kiểu dáng cơ bản cho biểu mẫu phương thức của chúng tôi

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
      Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        Button>
      Modal.Footer>
    Modal>
  )
}

Phần kết luận

React-Bootstrap là một công cụ rất mạnh dành cho nhà phát triển, bạn đang tận dụng tối đa cả hai thế giới về mặt kỹ thuật. Đối với Modal, bên cạnh việc tạo ra một dạng modal, có thể có rất nhiều loại modal khác nhau (ví dụ:. phương thức lưới, phương thức trung tâm, kích thước tùy chọn, v.v.)