Cách tạo biểu mẫu nhiều bước với giao diện người dùng React và ngữ nghĩa
Biểu mẫu là phương pháp tiêu chuẩn được sử dụng để thu thập thông tin đầu vào của user trên các ứng dụng web. Tuy nhiên, đôi khi ta có thể thu thập số lượng lớn có thể dẫn đến một biểu mẫu lớn với một số trường. Đây có thể là một khó khăn không chỉ cho user mà còn cho cả nhà phát triển vì họ sẽ phải điều chỉnh các trường này vào biểu mẫu theo cách trông vẫn hấp dẫn đối với user .Giải pháp là chia biểu mẫu thành nhiều phần để thu thập một loại thông tin nhất định tại mỗi điểm. React làm cho điều này trở nên đơn giản để thực hiện. Ta có thể làm điều này bằng cách chia nhỏ các phần (bước) thành các thành phần React riêng lẻ để thu thập các đầu vào nhất định. Sau đó, ta có thể chọn các thành phần được hiển thị ở mỗi bước bằng cách thao tác trạng thái. Trong hướng dẫn này, bạn sẽ thấy cách thực hiện việc này cũng như chia sẻ chức năng giữa các thành phần bằng cách sử dụng ví dụ về biểu mẫu đăng ký.
Bắt đầu
Bạn sẽ bắt đầu dự án bằng cách sử dụng ứng dụng tạo-phản ứng, ứng dụng này sẽ đảm nhận việc cấu hình môi trường phát triển React cũng như cung cấp một số bản soạn thảo để bắt đầu. Để cài đặt create-react-app chạy tập lệnh sau trong terminal của bạn:
npm install -g create-react-app Bây giờ ta đã cài đặt ứng dụng tạo-phản ứng. Bước tiếp theo là khởi tạo ứng dụng của ta . Để làm điều này, hãy chạy:
create-react-app multistep-form Điều này sẽ tạo ra một ứng dụng React mẫu với môi trường phát triển được cấu hình đầy đủ. Cấu trúc folder sẽ như thế này
|---public |------favicon.ico |------index.html |------manifest.json |---src |------app.css |------app.js |------app.test.js |------index.css |------index.js # |------logo.svg |------registerServiceWorker.js |---.gitignore |---package.json |---README.md |---yarn.lock Ta cũng sẽ sử dụng sợi làm trình quản lý gói mặc định của bạn . Yarn là một giải pháp thay thế tuyệt vời cho npm vì nó khóa các version phụ thuộc - một tính năng đã được thêm vào các version gần đây của npm. Yarn cũng là trình quản lý gói mặc định cho create-react-app . Nếu bạn chưa có sợi, bạn có thể tìm hướng dẫn cài đặt tại đây .
Để tạo kiểu, ta sẽ sử dụng Semantic UI là một khung giao diện user có thể dễ dàng cắm vào các ứng dụng React bằng Semantic UI React . Semantic UI React cung cấp một số thành phần dựng sẵn mà ta có thể sử dụng để tăng tốc quá trình phát triển của bạn . Khung cũng hỗ trợ khả năng đáp ứng, điều này làm cho nó trở nên tuyệt vời để xây dựng các trang web đa nền tảng. Để cài đặt nó chạy:
yarn add semantic-ui-react Để thêm CSS UI ngữ nghĩa tùy chỉnh, hãy thêm phần sau vào phần head của index.html .
// index.html <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link> Đến đây bạn đã sẵn sàng để tiếp tục.
Tạo các thành phần
Bây giờ dự án đã được cài đặt , hãy tạo một folder components folder src trong đó ta sẽ đặt các thành phần biểu mẫu của ta .
Bên trong nó tạo ra 5 file : Confirmation.jsx , MainForm.jsx , PersonalDetails.jsx , Success.jsx và UserDetails.jsx . Vui lòng xác định các thành phần lớp trống trong mỗi file này, ta sẽ thêm nhiều chức năng hơn khi ta thực hiện qua hướng dẫn này.
Bây giờ, hãy chỉnh sửa app.js để nhập các thành phần của ta và hiển thị chúng. Xóa mã bảng soạn sẵn được thêm bởi create-react-app và thay vào đó hãy thêm mã sau.
// app.js import React, { Component } from 'react'; import './App.css'; import MainForm from './components/MainForm'; import { Container } from 'semantic-ui-react'; class App extends Component { render() { return( <Container textAlign='center'> <MainForm /> </Container> ) } } export default App; Ta đã bao bọc biểu mẫu trong một thành phần Container từ Semantic UI React, điều này làm cho biểu mẫu dễ trình bày hơn bằng cách căn giữa văn bản và thêm phần đệm.
Thành phần đầu tiên ta sẽ cài đặt là thành phần MainForm sẽ phụ trách hầu hết các chức năng trong ứng dụng của ta .
// MainForm.jsx import React, { Component } from 'react'; import UserDetails from './UserDetails'; import PersonalDetails from './PersonalDetails'; import Confirmation from './Confirmation'; import Success from './Success'; class MainForm extends Component { state = { step: 1, firstName: '', lastName: '', email: '', age: '', city: '', country: '' } nextStep = () => { const { step } = this.state this.setState({ step : step + 1 }) } prevStep = () => { const { step } = this.state this.setState({ step : step - 1 }) } handleChange = input => event => { this.setState({ [input] : event.target.value }) } render(){ const {step} = this.state; const { firstName, lastName, email, age, city, country } = this.state; const values = { firstName, lastName, email, age, city, country }; switch(step) { case 1: return <UserDetails nextStep={this.nextStep} handleChange = {this.handleChange} values={values} /> case 2: return <PersonalDetails nextStep={this.nextStep} prevStep={this.prevStep} handleChange = {this.handleChange} values={values} /> case 3: return <Confirmation nextStep={this.nextStep} prevStep={this.prevStep} values={values} /> case 4: return <Success /> } } } export default MainForm; Hãy xem qua mã ta vừa thêm. Bước lớn nhất mà ta đã thực hiện để tạo biểu mẫu nhiều bước của bạn là sử dụng câu lệnh switch , đọc step từ trạng thái và sử dụng điều này để chọn các thành phần được hiển thị ở mỗi bước.
Thành phần được khởi tạo với giá trị mặc định cho bước ở trạng thái là 1 và phần đầu tiên của biểu mẫu của ta được hiển thị. Sau đó user có thể bỏ qua qua lại giữa các bước sử dụng prevStep và nextStep chức năng. Những cập nhật này cập nhật giá trị của step ở trạng thái để cho phép user chuyển đổi giữa các thành phần được hiển thị.
Các handleChange chức năng cập nhật các giá trị của các chi tiết được cung cấp bởi tình trạng người sử dụng bên trong và như prevStep và nextStep chức năng, nó sẽ được chuyển đến các thành phần con như đạo cụ. Điều này sẽ cho phép ta chuyển chức năng được triển khai để sử dụng trong các thành phần con như ta sắp xem trong bước tiếp theo.
Bây giờ, hãy tạo phần đầu tiên của biểu mẫu. Bên trong UserDetails.jsx đặt mã sau.
// UserDetails.jsx import React, { Component } from 'react'; import { Form, Button } from 'semantic-ui-react'; class UserDetails extends Component{ saveAndContinue = (e) => { e.preventDefault() this.props.nextStep() } render(){ const { values } = this.props; return( <Form > <h1 className="ui centered">Enter User Details</h1> <Form.Field> <label>First Name</label> <input placeholder='First Name' onChange={this.props.handleChange('firstName')} defaultValue={values.firstName} /> </Form.Field> <Form.Field> <label>Last Name</label> <input placeholder='Last Name' onChange={this.props.handleChange('lastName')} defaultValue={values.lastName} /> </Form.Field> <Form.Field> <label>Email Address</label> <input type='email' placeholder='Email Address' onChange={this.props.handleChange('email')} defaultValue={values.email} /> </Form.Field> <Button onClick={this.saveAndContinue}>Save And Continue </Button> </Form> ) } } export default UserDetails; Điều này tạo ra một biểu mẫu thu thập tên, họ và địa chỉ email của user . Sau saveAndContinue hàm saveAndContinue chịu trách nhiệm định tuyến ta đến thành phần tiếp theo sau khi ta điền xong các chi tiết. Bạn sẽ nhận thấy rằng ta đã gọi hàm nextStep mà ta đã cung cấp cho thành phần dưới dạng đạo cụ. Mỗi khi hàm này được gọi, nó sẽ cập nhật trạng thái của thành phần mẹ ( MainForm ). Ta cũng gọi là handleChange và cung cấp tên của từng trường sẽ được cập nhật trên mỗi phần tử đầu vào.
Bạn có thể cũng đã nhận thấy rằng mỗi lĩnh vực đầu vào được cung cấp một defaultValue mà nó nhặt từ trạng thái của MainForm thành phần. Điều này cho phép nó chọn giá trị được cập nhật ở trạng thái trong trường hợp user định tuyến trở lại bước này từ bước khác như ta sẽ thấy trong thành phần tiếp theo của ta .
Bây giờ hãy tạo phần thứ hai của ta , phần này thu thập thông tin cá nhân của user . Bên trong PersonalDetails.jsx , thêm mã sau.
// PersonalDetails.jsx import React, { Component } from 'react'; import { Form, Button } from 'semantic-ui-react'; import { throws } from 'assert'; class PersonalDetails extends Component{ saveAndContinue = (e) => { e.preventDefault(); this.props.nextStep(); } back = (e) => { e.preventDefault(); this.props.prevStep(); } render(){ const { values } = this.props return( <Form color='blue' > <h1 className="ui centered">Enter Personal Details</h1> <Form.Field> <label>Age</label> <input placeholder='Age' onChange={this.props.handleChange('age')} defaultValue={values.age} /> </Form.Field> <Form.Field> <label>City</label> <input placeholder='City' onChange={this.props.handleChange('city')} defaultValue={values.city} /> </Form.Field> <Form.Field> <label>Country</label> <input placeholder='Country' onChange={this.props.handleChange('country')} defaultValue={values.country} /> </Form.Field> <Button onClick={this.back}>Back</Button> <Button onClick={this.saveAndContinue}>Save And Continue </Button> </Form> ) } } export default PersonalDetails; Phần này thu thập tuổi và vị trí của user . Chức năng tổng thể tương tự như phần chi tiết user ngoại trừ việc bổ sung nút quay lại, nút này sẽ đưa ta trở lại bước trước đó bằng cách gọi prevStep từ các đạo cụ.
Ta có các hàm back và saveAndContinue trong mỗi thành phần của ta lấy event(e) làm đối số và ta gọi event.preventDefault() trong các hàm này để ngăn biểu mẫu reload mỗi lần ta gửi. Đây là hành vi mặc định trong biểu mẫu.
Bây giờ, hãy tạo phần cuối cùng của biểu mẫu của ta , nơi user xác nhận các chi tiết họ đã cung cấp ứng dụng là chính xác. Thêm mã sau vào Confirmation.jsx
// Confirmation.jsx import React, { Component } from 'react'; import { Button, List } from 'semantic-ui-react'; class Confirmation extends Component{ saveAndContinue = (e) => { e.preventDefault(); this.props.nextStep(); } back = (e) => { e.preventDefault(); this.props.prevStep(); } render(){ const {values: { firstName, lastName, email, age, city, country }} = this.props; return( <div> <h1 className="ui centered">Confirm your Details</h1> <p>Click Confirm if the following details have been correctly entered</p> <List> <List.Item> <List.Icon name='users' /> <List.Content>First Name: {firstName}</List.Content> </List.Item> <List.Item> <List.Icon name='users' /> <List.Content>Last Name: {lastName}</List.Content> </List.Item> <List.Item> <List.Icon name='mail' /> <List.Content> <a href='mailto:jack@semantic-ui.com'>{email}</a> </List.Content> </List.Item> <List.Item> <List.Icon name='calendar' /> <List.Content>{age} Years</List.Content> </List.Item> <List.Item> <List.Icon name='marker' /> <List.Content>{city}, {country}</List.Content> </List.Item> </List> <Button onClick={this.back}>Back</Button> <Button onClick={this.saveAndContinue}>Confirm</Button> </div> ) } } export default Confirmation; Điều này tạo ra một phần hiển thị tất cả các chi tiết được nhập bởi user và yêu cầu họ xác nhận các chi tiết trước khi gửi chúng. Đây thường là nơi ta thực hiện các lệnh gọi API cuối cùng đến phần backend để gửi và lưu dữ liệu của ta . Vì đây chỉ là một bản demo, nút Confirm chỉ thực hiện cùng một chức năng saveAndeContinue mà ta đã sử dụng trong các thành phần trước đó. Tuy nhiên, trong trường hợp thực tế, ta sẽ triển khai một chức năng gửi khác để xử lý lần gửi cuối cùng và lưu dữ liệu.
Thành phần tiếp theo và cuối cùng trong dự án của ta là Success phần Success sẽ được hiển thị khi user lưu thành công thông tin của họ. Để tạo điều này, hãy thêm mã sau vào Success.jsx .
// Success.jsx import React, { Component } from 'react'; class Success extends Component{ render(){ return( <div> <h1 className="ui centered">Details Successfully Saved</h1> </div> ) } } export default Success; Bây giờ kích hoạt ứng dụng của bạn và thực hiện các bước.
Kết luận
Biểu mẫu nhiều bước rất tuyệt khi ta cần chia biểu mẫu thành nhiều phần. Chúng cũng có thể cho phép ta thực hiện xác thực biểu mẫu ở mỗi bước trước khi chuyển sang bước tiếp theo. Việc sử dụng câu lệnh case để định tuyến giữa các bước giúp loại bỏ sự cần thiết của bộ định tuyến, nghĩa là ta có thể dễ dàng cắm biểu mẫu vào các thành phần khác mà không cần phải điều chỉnh định tuyến. Cũng có thể cài đặt lệnh gọi API giữa các bước nếu cần thiết, điều này mở ra một số khả năng mới. Bạn cũng có thể xử lý trạng thái tốt hơn bằng cách thêm các công cụ quản lý trạng thái như Redux .
Các tin liên quan
