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

Question

Đó 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

Nội dung chính Show

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
Phần kết luận

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>
  )
}

6

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

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'

0. Ban đầu, tôi đã mã hóa cứng giá trị thành

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

1 nhưng trong một ứng dụng phản ứng thực tế, chúng tôi sẽ cần thêm logic để chuyển đổi thuộc tính

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

0 của mình

Trong

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

3 của chúng tôi

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'

0

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'

4 để đặt isOpen thành true khi biểu mẫu phương thức được kích hoạt,

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

5 để đóng biểu mẫu phương thức và cũng bao gồm biểu mẫu phương thức ternary để hiển thị có điều kiện trên thành phần Ứng dụng

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'

3

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'

0 của chúng tôi hiện được liên kết với trạng thái

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

7, được kế thừa từ Ứng dụng. Thuộc tính

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

8 mới là cần thiết nếu bạn muốn thoát khỏi biểu mẫu phương thức bằng cách nhấn phím esc hoặc nhấp vào phông nền không tĩnh

Đố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'

9 và

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>
  )
}

0 để tạo biểu mẫu được kiểm soát (đọc thêm về biểu mẫu được kiểm soát/không được kiểm soát tại đây). Trong

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>
  )
}

1, tôi cũng đã thêm hàm

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>
  )
}

2 để xử lý giá trị đầu vào của biểu mẫu và gửi lại cho Ứng dụng

Á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>
  )
}

1

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>
  )
}

3 và

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>
  )
}

4 là một cú pháp ngắn hơn để khai báo các đoạn trong phản ứng. Tôi cũng đã thêm thuộc tí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>
  )
}

5 vào quảng cáo Thành phần phương thức của chúng tôi, đặt thuộc tính đó thà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>
  )
}

6. Bằng cách này, biểu mẫu phương thức của chúng tôi sẽ không bị đóng khi nhấn phím esc hoặc nhấp vào phông nền không tĩnh

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.)

programming bootstrap

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

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

Phần kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội