Các biểu mẫu phản ứng
Cũng giống như trong HTML, React sử dụng các biểu mẫu để cho phép người dùng tương tác với trang web.
Thêm biểu mẫu trong React
Bạn thêm một biểu mẫu với React giống như bất kỳ phần tử nào khác:
Thí dụ:
Thêm biểu mẫu cho phép người dùng nhập tên của họ:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Điều này sẽ hoạt động như bình thường, biểu mẫu sẽ được gửi và trang sẽ làm mới.
Nhưng điều này nói chung không phải là những gì chúng ta muốn xảy ra trong React.
Chúng tôi muốn ngăn chặn hành vi mặc định này và để React kiểm soát biểu mẫu.
Xử lý các biểu mẫu
Xử lý biểu mẫu là về cách bạn xử lý dữ liệu khi nó thay đổi giá trị hoặc được gửi.
Trong HTML, dữ liệu biểu mẫu thường được xử lý bởi DOM.
Trong React, dữ liệu biểu mẫu thường được xử lý bởi các thành phần.
Khi dữ liệu được xử lý bởi các thành phần, tất cả dữ liệu được lưu trữ ở trạng thái thành phần.
Bạn có thể kiểm soát các thay đổi bằng cách thêm trình xử lý sự kiện trong
onChangethuộc tính.
Chúng ta có thể sử dụng useStateHook để theo dõi từng giá trị đầu vào và cung cấp một "nguồn sự thật duy nhất" cho toàn bộ ứng dụng.
Xem phần React Hooks để biết thêm thông tin về Hooks.
Thí dụ:
Sử dụng onChangeHook để quản lý đầu vào:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Được chứng nhận!
$ 95 GHI DANH
Gửi biểu mẫu
Bạn có thể kiểm soát hành động gửi bằng cách thêm trình xử lý sự kiện trong onSubmitthuộc tính cho <form>:
Thí dụ:
Thêm nút gửi và trình xử lý sự kiện trong onSubmitthuộc tính:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Nhiều trường đầu vào
Bạn có thể kiểm soát các giá trị của nhiều trường đầu vào bằng cách thêm một
namethuộc tính vào mỗi phần tử.
Chúng tôi sẽ khởi tạo trạng thái của chúng tôi với một đối tượng rỗng.
Để truy cập các trường trong trình xử lý sự kiện, hãy sử dụng
cú pháp event.target.namevà
event.target.value.
Để cập nhật trạng thái, hãy sử dụng dấu ngoặc vuông [ký hiệu dấu ngoặc vuông] xung quanh tên thuộc tính.
Thí dụ:
Viết một biểu mẫu với hai trường đầu vào:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Lưu ý: Chúng tôi sử dụng cùng một hàm xử lý sự kiện cho cả hai trường đầu vào, chúng tôi có thể viết một trình xử lý sự kiện cho mỗi trường, nhưng điều này mang lại cho chúng tôi mã rõ ràng hơn nhiều và là cách được ưa thích trong React.
Textarea
Phần tử textarea trong React hơi khác so với HTML thông thường.
Trong HTML, giá trị của một vùng văn bản là văn bản giữa thẻ bắt đầu
<textarea>
và thẻ kết thúc </textarea>.
<textarea>
Content of the textarea.
</textarea>Trong React, giá trị của một vùng văn bản được đặt trong một thuộc tính giá trị. Chúng tôi sẽ sử dụng useStateHook để điều chỉnh giá trị của textarea:
Thí dụ:
Một khung văn bản đơn giản với một số nội dung:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Lựa chọn
Danh sách thả xuống hoặc hộp chọn trong React cũng khác một chút so với HTML.
trong HTML, giá trị đã chọn trong danh sách thả xuống được xác định bằng selectedthuộc tính:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>Trong React, giá trị đã chọn được xác định bằng value
thuộc tính trên selectthẻ:
Thí dụ:
Một hộp chọn đơn giản, trong đó giá trị đã chọn "Volvo" được khởi tạo trong hàm tạo:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Bằng cách thực hiện những thay đổi nhỏ này đối với <textarea>và <select>, React có thể xử lý tất cả các phần tử đầu vào theo cùng một cách.