Cách làm việc với các phần tử biểu mẫu trong React
Làm việc với các biểu mẫu và phần tử biểu mẫu khi phát triển với React có thể phức tạp vì các phần tử biểu mẫu HTML hoạt động hơi khác trong React so với các phần tử DOM khác.
Tìm hiểu cách làm việc với các biểu mẫu và thành phần biểu mẫu, chẳng hạn như hộp kiểm, vùng văn bản và kiểu nhập văn bản một dòng.
Mục Lục
Quản lý các trường nhập liệu trong biểu mẫu
Trong React, việc quản lý trường đầu vào trong biểu mẫu thường được thực hiện bằng cách tạo trạng thái và liên kết nó với trường đầu vào.
Ví dụ:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName( event.target.value )
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
Ở trên chúng ta có một họ tiểu bang, một onInput sự kiện và một xử lýThay đổi người xử lý. Các xử lýThay đổi chức năng chạy trên mỗi lần nhấn phím để cập nhật họ tiểu bang.
Cách tiếp cận này có thể lý tưởng khi làm việc với một trường đầu vào, nhưng việc tạo các trạng thái và hàm xử lý khác nhau cho từng phần tử đầu vào sẽ trở nên lặp lại khi làm việc với nhiều trường đầu vào.
Để tránh viết mã lặp lại và thừa trong các tình huống như vậy, hãy đặt tên riêng cho từng trường nhập, đặt một đối tượng làm giá trị trạng thái ban đầu của biểu mẫu của bạn, sau đó điền vào đối tượng các thuộc tính có cùng tên với các trường nhập.
Ví dụ:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
Các biểu mẫuDữ liệu sẽ đóng vai trò là biến trạng thái để quản lý và cập nhật tất cả các trường đầu vào bên trong biểu mẫu. Đảm bảo tên của các thuộc tính trong đối tượng trạng thái giống với tên của các phần tử đầu vào.
Để cập nhật trạng thái với dữ liệu đầu vào, hãy thêm một onInput trình xử lý sự kiện cho phần tử đầu vào, sau đó gọi hàm xử lý đã tạo của bạn.
Ví dụ:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
Khối mã ở trên đã sử dụng một onInput sự kiện và chức năng xử lý, handleFirstNameChange. Đây handleFirstNameChange chức năng sẽ cập nhật các thuộc tính trạng thái khi được gọi. Giá trị của các thuộc tính trạng thái sẽ giống như giá trị của các phần tử đầu vào tương ứng của chúng.
Chuyển đổi đầu vào của bạn thành các thành phần được kiểm soát
Khi một biểu mẫu HTML gửi đi, hành vi mặc định của nó là điều hướng đến một trang mới trong trình duyệt. Hành vi này bất tiện trong một số trường hợp, chẳng hạn như khi bạn muốn xác thực dữ liệu được nhập vào một biểu mẫu. Trong hầu hết các trường hợp, bạn sẽ thấy phù hợp hơn khi có một hàm JavaScript có quyền truy cập vào thông tin được nhập vào biểu mẫu. Điều này có thể dễ dàng đạt được trong React bằng cách sử dụng các thành phần được kiểm soát.
Với các tệp index.html, các thành phần biểu mẫu theo dõi trạng thái của chúng và sửa đổi nó để đáp ứng với đầu vào của người dùng. Với React, chức năng trạng thái thiết lập sẽ sửa đổi trạng thái động được lưu trữ trong thuộc tính trạng thái của thành phần. Bạn có thể kết hợp hai trạng thái bằng cách biến trạng thái React thành nguồn sự thật duy nhất. Bằng cách này, thành phần tạo biểu mẫu kiểm soát những gì xảy ra khi người dùng nhập dữ liệu. Các phần tử biểu mẫu đầu vào có giá trị mà React điều khiển được gọi là các thành phần được điều khiển hoặc đầu vào được điều khiển.
Để sử dụng các đầu vào được kiểm soát trong ứng dụng React của bạn, hãy thêm một giá trị chống đỡ cho phần tử đầu vào của bạn:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Các thuộc tính giá trị của các thành phần đầu vào hiện được đặt thành giá trị của các thuộc tính trạng thái tương ứng. Giá trị của đầu vào luôn được xác định bởi trạng thái khi sử dụng thành phần được kiểm soát.
Xử lý phần tử đầu vào Textarea
Các vùng văn bản phần tử giống như bất kỳ phần tử đầu vào thông thường nào nhưng chứa đầu vào nhiều dòng. Nó rất hữu ích khi chuyển thông tin yêu cầu nhiều hơn một dòng.
Trong tệp index.html, thẻ vùng văn bản phần tử xác định giá trị của nó bởi các phần tử con của nó, như được thấy trong khối mã bên dưới:
<textarea>
Hello, How are you?
</textarea>
Với React, để sử dụng vùng văn bản phần tử, bạn có thể tạo một phần tử đầu vào với loại vùng văn bản.
Như vậy:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Một thay thế cho việc sử dụng vùng văn bản như một loại đầu vào là sử dụng vùng văn bản thẻ phần tử thay cho thẻ loại đầu vào, như bên dưới:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
Các vùng văn bản thẻ có một thuộc tính giá trị chứa thông tin của người dùng được nhập vào vùng văn bản yếu tố. Điều này làm cho nó hoạt động giống như một phần tử đầu vào mặc định của React.
Làm việc với phần tử đầu vào hộp kiểm của React
Mọi thứ hơi khác một chút khi làm việc với hộp kiểm đầu vào. Trường đầu vào của loại hộp kiểm không có thuộc tính giá trị. Tuy nhiên, nó có một đã kiểm tra thuộc tính. Đây đã kiểm tra thuộc tính khác với thuộc tính giá trị bằng cách yêu cầu một giá trị boolean để xác định xem hộp được chọn hay bỏ chọn.
Ví dụ:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Phần tử nhãn đề cập đến ID của phần tử đầu vào bằng cách sử dụng htmlDành cho thuộc tính. Đây htmlDành cho thuộc tính nhận ID của phần tử đầu vào—trong trường hợp này, tham gia. Khi tạo một biểu mẫu HTML, htmlDành cho thuộc tính đại diện cho vì thuộc tính.
Các hộp kiểm được sử dụng tốt hơn như một đầu vào được kiểm soát. Bạn có thể đạt được điều này bằng cách tạo một trạng thái và gán cho nó giá trị boolean ban đầu là đúng hoặc sai.
Bạn nên bao gồm hai đạo cụ trên hộp kiểm yếu tố đầu vào: một đã kiểm tra tài sản và một onChange sự kiện có chức năng xử lý sẽ xác định giá trị của trạng thái bằng cách sử dụng setIsChecked() hàm số.
Ví dụ:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked( (prevState) => !prevState )
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Khối mã này tạo ra một được kiểm tra trạng thái và đặt giá trị ban đầu của nó thành sai. Nó đặt giá trị của được kiểm tra đến đã kiểm tra thuộc tính trong phần tử đầu vào. Các xử lýThay đổi chức năng sẽ kích hoạt và thay đổi giá trị trạng thái của được kiểm tra đối diện với nó bất cứ khi nào bạn nhấp vào hộp kiểm.
Một phần tử biểu mẫu có thể chứa nhiều phần tử đầu vào thuộc các loại khác nhau, chẳng hạn như hộp kiểm, văn bản, v.v.
Trong những trường hợp như vậy, bạn có thể xử lý chúng theo cách tương tự như cách bạn xử lý nhiều phần tử đầu vào cùng loại.
Đây là một ví dụ:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData( (prevState) => {
return {
...prevState,
[name]: type === checkbox ? checked : value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Lưu ý rằng trong xử lýThay đổi hàm số, setFormData sử dụng toán tử bậc ba để gán giá trị của đã kiểm tra thuộc tính thành thuộc tính trạng thái nếu loại đầu vào đích là một hộp kiểm. Nếu không, nó gán các giá trị của giá trị thuộc tính.
Bây giờ bạn có thể xử lý các biểu mẫu phản ứng
Bạn đã học cách làm việc với các biểu mẫu trong React bằng cách sử dụng các thành phần đầu vào biểu mẫu khác nhau tại đây. Bạn cũng đã học cách áp dụng các đầu vào được kiểm soát cho các phần tử biểu mẫu của mình bằng cách thêm một giá trị chống đỡ hoặc giá trị kiểm tra khi làm việc với các hộp kiểm.
Xử lý hiệu quả các yếu tố đầu vào của biểu mẫu React sẽ cải thiện hiệu suất của ứng dụng React của bạn, dẫn đến trải nghiệm người dùng tốt hơn.