Các biểu mẫu lạ mắt trong React với Reactstrap
Reactstrap cung cấp các thành phần Bootstrap 4 được dựng sẵn cho phép rất nhiều tính linh hoạt và xác nhận được tạo sẵn. Điều này cho phép ta nhanh chóng xây dựng các biểu mẫu đẹp được đảm bảo gây ấn tượng và cung cấp trải nghiệm user trực quan.
Bộ truyện
- Phần 1 : Các biểu mẫu lạ mắt trong React với Reactstrap
- Phần 2 : Sắp ra mắt: NPM Fort Awesome Sử dụng Font Awesome 5.0
Bắt đầu
Đối với bài đăng này, ta sẽ giả sử bạn đang sử dụng create-react-app dụng create-react-app hoặc thứ gì đó tương tự. Nếu bạn cần trợ giúp để bắt đầu, hãy tham khảo bài viết Làm quen với Tạo ứng dụng React của ta .
Đầu tiên, hãy cài đặt reactstrap :
$ npm install --save reactstrap react react-dom create-react-app yêu cầu cài đặt Bootstrap. Đây là cách thực hiện:
$ npm install bootstrap --save $ npm install --save reactstrap react react-dom Hoặc, bạn cũng có thể cài đặt mọi thứ cần thiết bằng Yarn :
$ yarn add reactstrap react react-dom bootstrap Tiếp theo nhập Bootstrap vào file src/index.js của bạn:
import 'bootstrap/dist/css/bootstrap.min.css'; Thành phần biểu mẫu
Reactstrap cho phép ta có các thành phần Form sẵn bao gồm bất kỳ thứ gì từ Input văn bản tiêu chuẩn của bạn đến Input tải lên file nâng cao hơn. Trong ví dụ này, ta sẽ tạo một dấu hiệu đơn giản trong biểu mẫu.
Đầu tiên nhập các Components bên dưới từ reactstrap vào file mong muốn của bạn. Trong ví dụ này, ta sẽ nhập Container và Col chính xác như bạn nghĩ: Bố cục dựng sẵn tiện dụng của Bootstrap! Ta cũng sẽ nhập Form , FormGroup , Label , Button và Input để sử dụng trực tiếp trong biểu mẫu đăng nhập của ta .
import { Container, Col, Form, FormGroup, Label, Input, Button, } from 'reactstrap'; Bây giờ ta đã có các thành phần cần thiết, hãy đi sâu vào.
Reactstrap có các props như type , name , id và placeholder . Kiểu xác định kiểu đầu vào như tải lên file , nút radio hoặc thậm chí là kiểu nhập văn bản cụ thể hơn như email. Khi sử dụng các loại văn bản đầu vào cụ thể như password , Reactstrap sẽ tự động ẩn đầu vào mà không cần mã hóa bổ sung. Tên là key cho cặp giá trị khóa cuối cùng sẽ được gửi đến chương trình backend của ta . ID là những gì ta sử dụng khi thao tác với DOM. Trình giữ chỗ cho phép ta thêm văn bản mẫu vào đầu vào.
Bằng cách triển khai đoạn mã bên dưới (cùng với một chút css), ta sẽ bắt đầu cuộc đua với một hình thức trông khá đẹp:
import React, { Component } from 'react'; import { Container, Col, Form, FormGroup, Label, Input, Button, } from 'reactstrap'; import './App.css'; class App extends Component { render() { return ( <Container className="App"> <h2>Sign In</h2> <Form className="form"> <Col> <FormGroup> <Label>Email</Label> <Input type="email" name="email" id="exampleEmail" placeholder="myemail@email.com" /> </FormGroup> </Col> <Col> <FormGroup> <Label for="examplePassword">Password</Label> <Input type="password" name="password" id="examplePassword" placeholder="********" /> </FormGroup> </Col> <Button>Submit</Button> </Form> </Container> ); } } export default App; Với một chút CSS, kết quả sẽ giống như thế này. 🐊
Tạo kiểu
Reactstrap cung cấp nhiều cách tích hợp để tạo kiểu cho các thành phần biểu mẫu của ta . Dưới đây là một số mục quan trọng có thể hữu ích.
- Màu sắc : Cũng giống như Bootstrap, Reactstrap có các màu tích hợp sẵn khi sử dụng
classNamemặc định nhưhas-success. - InLine Form : Trong
<Form>ta có thể thêm<Form inline>để đặtLabelvà Thông tinInputcủa bạn trong cùng một hàng. - Vùng chứa, Hàng & Cột, Ôi trời! :
<Col>là version Cột của Reactstrap. Điều này cho phép ta định dạng không chỉ cho máy tính để bàn mà còn cho thiết bị di động và máy tính bảng.
Xác thực và Gợi ý User
Xác thực trong Reactstrap có thể nói là một trong những tính năng plug and play dễ dàng nhất.
FormText cho phép ta thêm văn bản chỉ báo bổ sung bên trên hoặc bên dưới trường. Đối với ví dụ này, tôi đã thay đổi Label “Email” thành “Tên user ” và thêm FormText như một chỉ dẫn hữu ích về những gì họ nên sử dụng làm tên user của bạn .
<FormText>Your username is most likely your email.</FormText> 
FormFeedback xác thực ngay các trường. Bạn có thể linh hoạt tùy chỉnh xác thực đầu vào của bạn . Trong chức năng ví dụ bên dưới, ta thêm một chức năng với Regex để xác thực email trong sự kiện onChange và đặt trạng thái has-success hoặc has-danger .
validateEmail(e) { const emailRex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const { validate } = this.state if (emailRex.test(e.target.value)) { validate.emailState = 'has-success' } else { validate.emailState = 'has-danger' } this.setState({ validate }) } Để áp dụng điều này cho Input của bạn, chỉ cần thêm phần hỗ trợ hợp lệ và / hoặc không hợp lệ với các điều kiện của bạn:
valid={ this.state.validate.emailState === 'has-success' } invalid={ this.state.validate.emailState === 'has-danger' } Sau khi thêm các đạo cụ hợp lệ và không hợp lệ, hãy sử dụng FormFeedback để hiển thị văn bản thành công và / hoặc thất bại.
<FormFeedback valid> That's a tasty looking email you've got there. </FormFeedback> <FormFeedback invalid> Uh oh! Looks like there is an issue with your email. Please input a correct email. </FormFeedback> Bây giờ user sẽ nhận được nhiều hướng hơn nếu họ nhập sai tên user và sử dụng màu sắc như ta đã mô tả ở trên.
Mặt khác, nếu họ nhập email chính xác, họ sẽ nhận được dòng chữ màu xanh lá cây dễ chịu với lời chúc mừng.
Gửi biểu mẫu
Cuối cùng khi gửi, ta thường gửi dữ liệu đến database của bạn nhưng trong ví dụ của ta , ta điều khiển ghi lại email bằng cách sử dụng hàm submitForm . Ta khuyên bạn nên xem repo ví dụ để hiểu rõ hơn về các chức năng onChange và submitForm .
submitForm(e) { e.preventDefault(); console.log(`Email: ${ this.state.email }`) } Để biết thêm thông tin về Reactstrap, đây là liên kết đến tài liệu của họ .
Đối với dự án ví dụ đầy đủ, hãy sao chép repo này .
Các tin liên quan
