Cách tạo các biểu mẫu cơ bản bằng React Hooks

Trong Dự án React cho người mới bắt đầu này, chúng ta sẽ học cách xây dựng các biểu mẫu cơ bản bằng cách sử dụng React hook. Chúng ta sẽ tìm hiểu cách quản lý state biểu mẫu, xử lý xác thực và làm việc với trình xử lý gửi.

Kiểm tra thử nào:

Bắt tay xử lý vấn đề

Nếu bạn muốn tự mình thực hiện trước, đây là các tình huống (bạn cũng có thể lấy CSS / source code bên dưới):

  • Người dùng có thể nhập các giá trị vào biểu mẫu React Hooks
  • Khi người dùng nhấp vào gửi, nếu bất kỳ trường nào trống, thì thông báo lỗi sẽ xuất hiện màu đỏ
  • Nếu biểu mẫu được gửi và hợp lệ, thông báo thành công sẽ xuất hiện

Video hướng dẫn

Source code tham khảo

Source code trên GitHub

Bắt đầu thôi! Add state

Chúng ta sẽ bắt đầu bằng cách thêm một đối tượng state để giữ biểu mẫu của React Hooks. Chúng ta sẽ lấy một dòng mới ở đầu App function trong App.js và thêm phần sau:

const [values, setValues] = useState({
	firstName: '',
	lastName: '',
	email: '',
});

Chúng ta có ba trường trên biểu mẫu mà chúng ta cần biết state.

Bây giờ, state ban đầu sẽ là một đối tượng. Và đối tượng này sẽ có ba giá trị, một giá trị cho mỗi trường này. Vì vậy, chúng ta sẽ gọi chúng một cái gì đó tương tự như những gì chúng được gọi trong biểu mẫu.

firstName sẽ được đặt thành trống ban đầu, giống với lastName và giống với email.

Và bây giờ, bạn sẽ nhận thấy lỗi “useState is not defined”, vì vậy bạn cần nhập nó từ React tại đây. Thực hiện việc này ở đầu tệp như một phần của quá trình nhập:

import React, { useState } from "react";

Được rồi, bây giờ nó cho chúng ta biết rằng các biến này chưa được sử dụng. Điều này là tốt vì chúng ta chưa áp dụng các giá trị này cho biểu mẫu của React Hooks. Nhưng tất cả những gì chúng ta đã làm cho đến nay là chúng ta đã tạo một đối tượng state và đối tượng state này kéo firstName, lastName và email.

Bây giờ chúng ta có một số giá trị ở state, nên áp dụng chúng vào các trường input. Thêm một thuộc tính value vào mỗi trường input của bạn như sau:

<input
    id="first-name"
    class="form-field"
    type="text"
    placeholder="First Name"
    name="firstName"
    value={values.firstName}
/>

<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
/>

<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
/>

Tất cả những gì chúng ta đã làm ở đây là nói, “Được rồi, đối với input này, giá trị sẽ là bất kỳ giá trị nào ở state.” Hãy lưu điều này và xem những gì đang diễn ra trong các biểu mẫu trong React Hooks, để đảm bảo mọi thứ vẫn hoạt động.

Xem thêm các việc làm React hấp dẫn lương cao

Nếu bạn chọn một input và bắt đầu gõ mạnh trên bàn phím, không có gì xuất hiện trên màn hình. Vậy điều gì đang xảy ra ở đây?

Cập nhật input states

Chà, chúng ta đã nói rằng giá trị của input này sẽ là bất kể nó ở state nào.

Ví dụ: firstName hiện được đặt thành trống vì đó là những gì chúng ta đặt nó thành, nhưng chúng ta chưa nói với input, “Được rồi. Bất cứ khi nào tôi nhập hoặc input thay đổi, tôi muốn bạn tiếp tục và cập nhật state mới các giá trị. “

Bất cứ khi nào chúng ta làm những việc như thế này, nó sẽ cho phép React hooks kiểm soát một cách hiệu quả. Vì vậy, chúng ta phải yêu cầu React hooks cập nhật các giá trị.

Điều này có nghĩa là chúng ta phải cập nhật các giá trị state bất cứ lúc nào chúng ta nhập vào các trường này.

Được chứ. Cách đơn giản nhất để làm điều này là tạo một trình xử lý cho mỗi trường input này, trình xử lý này sẽ cập nhật state bất kỳ khi nào xảy ra sự kiện thay đổi.

Hãy tiếp tục và thêm phần sau ngay bên dưới các đối tượng state:

const handleFirstNameInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		firstName: event.target.value,
	}));
};

Điều này diễn ra sự kiện mà chúng ta nhận được từ onChange. Về cơ bản chúng ta đang cập nhật đối tượng này và sau đó lưu nó trở lại state.

Chúng ta sẽ sao chép các giá trị cũ bằng cách thực hiện dấu ba chấm, còn được gọi là toán tử chênh lệch. Và sau đó, chúng ta sẽ chỉ nhập các giá trị và thêm dấu phẩy.

Tiếp theo, chúng ta sẽ nói rằng firstName sẽ bằng event.target.value. chúng ta muốn thêm điều này vào input của chúng ta. Vì vậy, trong JSX của chúng ta trong input cho tên, chúng ta sẽ lấy một dòng mới ở đâu đó (ở bất kỳ đâu, điều đó không thực sự quan trọng) và thêm thuộc tính onChange như sau:

<input 
    id='first-name' 
    class='form-field' 
    type='text' 
    placeholder='First Name' 
    name='firstName' 
    value={values.firstName} 
    onChange={handleFirstNameInputChange} />

Bây giờ, nếu chúng ta truy cập trình duyệt của mình và bắt đầu nhập, bạn có thể thấy rằng mọi thứ hoạt động. Phần còn lại của chúng không hoạt động vì chúng ta chưa thêm trình xử lý cho chúng. chúng ta sẽ xem xét điều đó trong một phút.

Chỉ để tóm tắt lại những gì đang xảy ra: bất cứ khi nào chúng ta nhập vào ô này, sự kiện onChange sẽ xảy ra cho mọi lần nhấn phím. Điều này được gọi mọi lúc.

Sự kiện được React hooks chuyển vào và chúng ta muốn cập nhật đối tượng state của mình. Vì vậy, để làm điều đó, chúng ta gọi hàm setValues và truyền vào một đối tượng mới với các giá trị được cập nhật.

Bây giờ, chúng ta chỉ muốn làm điều tương tự cho lastName và email. Thêm một trình xử lý khác cho mỗi:

const handleLastNameInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		lastName: event.target.value,
	}));
};

const handleEmailInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		email: event.target.value,
	}));
};

Và đừng quên thêm các thuộc tính onChange vào các trường input cho mỗi:

<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
    onChange={handleLastNameInputChange}
/>
<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
    onChange={handleEmailInputChange}
/>

Bây giờ là thời điểm của sự thật. Mọi thứ đang hoạt động hay chúng ta đã làm hỏng thứ gì đó trong quá trình? Hãy thử tìm nó và xem. Điền vào một số dữ liệu và các trường input sẽ hoạt động ngay bây giờ.

Mặc dù các trường input của chúng ta đang hoạt động, chúng ta vẫn gặp một vấn đề nếu chúng ta nhập nội dung trong biểu mẫu và cố gắng gửi, nó sẽ không làm được gì cả. Nó sẽ chỉ làm mới trang và tất cả dữ liệu biểu mẫu của React Hooks sẽ bị mất.

Hiển thị thông báo thành công

Sau khi nhấp vào đăng ký, nó sẽ hiển thị thông báo thành công nếu biểu mẫu hợp lệ. Những gì chúng ta muốn làm là truy cập JSX của chúng ta và ngay bên dưới biểu mẫu thêm một div mới. Một lần nữa, tôi đã thêm các lớp cho bạn để có một thông báo thành công:

<div class='success-message'>Success! Thank you for registering</div>

Tất nhiên, bây giờ, điều này sẽ không đi đến đâu. Nó chỉ giả vờ rằng chúng ta đã gọi một máy chủ hoặc một điểm kết thúc ở đâu đó. Và nó quay lại với một thông báo thành công, vì vậy chúng ta sẽ hiển thị thông báo này cho người dùng.

Nhưng hiện tại nó xuất hiện mọi lúc. Những gì chúng ta muốn là chỉ hiển thị điều này nếu người dùng đã gửi biểu mẫu bằng React Hooks thành công.

Vì vậy, chúng ta sẽ thêm một đối tượng state khác như sau:

const [submitted, setSubmitted] = useState(false);

Chúng ta sẽ giữ phần này tách biệt với các giá trị vì nó là một phần khác của biểu mẫu. Không muốn trộn mọi thứ vào đây và gây ra toàn bộ kết xuất lại. Điều này sẽ cho chúng ta biết liệu biểu mẫu đã được gửi hay chưa.

Ban đầu, nó sẽ được đặt thành false vì lần đầu tiên người dùng truy cập vào trang, nó sẽ không được gửi.

Và bây giờ, chúng ta chỉ muốn thực hiện một số nội dung thông minh trong JSX để nói, “Nếu được gửi là đúng, thì chúng ta muốn hiển thị thông báo thành công.”

Cập nhật dòng mà chúng ta vừa thêm vào như sau:

{showSuccess && <div class='success-message'>Success! Thank you for registering</div>}

Chúng ta sẽ gói gọn thông điệp thành công của mình trong một toán tử bậc ba. Về cơ bản, đó là một câu lệnh if viết tắt cho phép chúng ta hiển thị động mọi thứ trên trang.

Giờ đây, thông báo thành công sẽ chỉ xuất hiện nếu showSuccess là đúng. Như bạn có thể thấy bây giờ trong trình duyệt, điều này đã biến mất.

Nếu chúng ta quay trở lại đối tượng state của chúng ta để submitted và thay đổi điều này thành true, nó sẽ xuất hiện lại. Và nó có

Chúng ta sẽ thay đổi điều này trở lại thành false. Và sau đó, chúng ta sẽ làm mới Chrome của mình và chỉ cần xem điều gì sẽ xảy ra ngay bây giờ.

Chúng ta chưa cho nút đăng ký hoặc biểu mẫu biết điều gì sẽ xảy ra trên hội nghị, vì vậy nó vẫn sẽ làm mới trang. Bây giờ, chúng ta chỉ cần một trình xử lý mới để xử lý việc nhấp vào nút đăng ký.

Nếu chúng ta chuyển sang trình xử lý sự kiện của mình và thêm những thứ sau:

const handleSubmit = (e) => {
	e.preventDefault();
	setSubmitted(true);
};

event.preventDefault sẽ ngăn quá trình làm mới xảy ra mà chúng ta đã thấy.

Chúng ta sẽ thêm một số logic nữa vào đây trong một phút nữa về xác thực và các thứ. Nhưng hiện tại, chúng ta chỉ nói “setSubmitted” là đúng.

Tiếp theo, chúng ta cần yêu cầu biểu mẫu gọi hàm này khi nó được gửi. Cập nhật JSX để bao gồm thuộc tính onSubmit trong thẻ biểu mẫu như sau:

<form class='register-form' onSubmit={handleSubmit}>
	//... other code
</form>

Bây giờ nếu chúng ta chạy mã trên trình duyệt, bấm vào nút đăng ký, thông báo hiện ra.

Thêm Validation và hiển thị thông báo lỗi

Biểu mẫu của chúng ta cho đến nay trông rất ổn, nhưng chúng ta thiếu một thành phần quan trọng của bất kỳ biểu mẫu nào và đó là xác thực. Nếu chúng ta xem xét ví dụ làm việc của mình, nếu tôi gửi điều này với bất kỳ trường trống nào, một lỗi sẽ xuất hiện cho biết, “Vui lòng nhập thông tin chi tiết của bạn”.

Bên dưới mỗi input, chúng ta sẽ thêm một <span> sẽ chứa thông báo lỗi. JSX của bạn sẽ trông giống như sau:

<input
    id="first-name"
    class="form-field"
    type="text"
    disabled={showSuccess}
    placeholder="First Name"
    name="firstName"
    value={values.firstName}
    onChange={handleInputChange}
/>
<span id="first-name-error">Please enter a first name</span>

<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
    onChange={handleInputChange}
/>
<span id="last-name-error">Please enter a last name</span>

<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
    onChange={handleInputChange}
/>
<span id="email-error">Please enter an email address</span>

Bạn có thể thấy những lỗi này luôn xuất hiện, bởi vì chúng ta không có bất kỳ logic điều kiện nào cho biết “không xuất hiện”.

Bây giờ, chúng ta chỉ muốn các thông báo lỗi này hiển thị nếu nút đăng ký đã được nhấp.

Quay lại code. Chúng ta muốn thêm một số logic có điều kiện vào và xung quanh các thông báo lỗi để chúng chỉ xuất hiện nếu nút đã được nhấp và trường trống:

{submitted && !values.firstName && <span id='first-name-error'>Please enter a first name</span>}

Những gì chúng ta đang làm ở đây là kiểm tra xem biểu mẫu đã được gửi và đối tượng state firstName có trống không. Nếu vậy, chúng ta muốn hiển thị thông báo lỗi. Một lần nữa, chúng ta chỉ sử dụng một toán tử bậc ba, không có gì lạ!

Làm tương tự cho các lỗi khác:

{submitted && !values.lastName && <span id='last-name-error'>Please enter a last name</span>}

//...other code

{submitted && !values.email && <span id='email-error'>Please enter an email address</span>}

Nếu chúng ta để trống biểu mẫu và nhấp vào đăng ký, lỗi sẽ xuất hiện. Nếu chúng ta bắt đầu nhập mọi thứ, chúng ta có thể thấy rằng lỗi sẽ biến mất. Và nếu chúng ta xóa những gì chúng ta đã nhập, lỗi sẽ quay trở lại.

Hãy thử và gửi một số thứ. Được rồi, vì vậy điều này có vẻ đang hoạt động.

Điều cuối cùng chúng ta muốn làm là đảm bảo rằng thông báo thành công này chỉ xuất hiện nếu biểu mẫu hợp lệ. Hãy tiếp tục và thêm một giá trị state mới:

const [valid, setValid] = useState(false);

Điều này được sử dụng để cho chúng ta biết liệu biểu mẫu của chúng ta có hợp lệ hay không – hãy nhớ rằng, sử dụng các đối tượng state là một cách tốt để giữ “state” của các phần khác nhau trong ứng dụng của bạn (ai có thể đoán được?).

Thông báo thành công sẽ chỉ xuất hiện nếu đã gửi là đúng và theo dõi cũng đúng. Vì ban đầu chúng ta đã đặt giá trị hợp lệ là false, nên nó sẽ không hiển thị.

Xem thêm các việc làm về tuyển dụng Business Analyst

Trong hàm handleSubmit của chúng ta, chúng ta muốn nói rằng giá trị là true nếu một biểu mẫu hợp lệ. Chúng ta có thể làm điều này bằng cách kiểm tra từng giá trị state của chúng ta cho các trường biểu mẫu, đảm bảo rằng chúng là một giá trị trung thực.

Thêm những điều sau:

const handleSubmit = (event) => {
event.preventDefault();
if(values.firstName && values.lastName && values.email) {
    setValid(true);
}
setSubmitted(true);
}

Nếu bất kỳ trường nào trong số này là false, thì valid hợp lệ sẽ vẫn là false. Điều này có nghĩa là div thông báo thành công sẽ không được hiển thị. Hãy xem nó hoạt động. Nếu chúng ta nhấp vào đăng ký mà không có trường, thông báo lỗi của chúng ta sẽ hiển thị. Hãy nhập một số nội dung hợp lệ, nhấn đăng ký và thông báo xuất hiện!

Có thể bạn quan tâm:

Xem thêm tuyển dụng IT hấp dẫn trên TopDev