Đó 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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
6class ModalForm extends Component {
return[
Modal heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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'
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ìnhTrong
import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'
3 của chúng tôiclass 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'
0Và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ụngBâ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'
3Và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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
1, tôi cũng đã thêm hàm class ModalForm extends Component {
return[
Modal heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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 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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
class ModalForm extends Component {
return[
Modal heading
Woohoo, you're reading this text in a modal!
Submit
]
}
3 và class ModalForm extends Component {
return[
Modal heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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 heading
Woohoo, you're reading this text in a modal!
Submit
]
}
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ĩnhPhầ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.]