Biểu mẫu phản ứ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 bằng React giống như bất kỳ phần tử nào khác:
Ví dụ:
Thêm một form cho phép người dùng nhập tên:
function MyForm() { return ( <form> <label>Enter your name: <input type="text" /> </label> </form> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyForm />);Điều này sẽ hoạt động như bình thường, biểu mẫu sẽ được gửi và trang sẽ được làm mới.
Nhưng đây thường không phải là điều chúng tôi 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.
Biểu mẫu xử lý
Xử lý biểu mẫu là 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 DOM xử lý.
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 các thành phần xử lý, tất cả dữ liệu sẽ đượ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 vào thuộc tính onChange .
Chúng ta có thể sử dụng useState Hook để theo dõi từng giá trị đầu vào và cung cấp "nguồn thông tin chính xác duy nhất" cho toàn bộ ứng dụng.
Xem phần React Hook để biết thêm thông tin về Hook.
Ví dụ:
Sử dụng useState Hook để quản lý đầu vào:
import { useState } from 'react'; import ReactDOM from 'react-dom/client'; 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> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyForm />);Được chứng nhận!
$95 ĐĂNG KÝ
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 thuộc tính onSubmit cho <form> :
Ví dụ:
Thêm nút gửi và trình xử lý sự kiện trong thuộc tính onSubmit :
import { useState } from 'react'; import ReactDOM from 'react-dom/client'; 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> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyForm />);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 thuộc tính name cho mỗi thành phần.
Chúng ta sẽ khởi tạo trạng thái của mình với một đối tượng trố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.name và 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 ngoặc] xung quanh tên thuộc tính.
Ví 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/client'; 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> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyForm />);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ã sạch hơn nhiều và là cách ưa thích trong React.
Vùng văn bản
Phần tử vùng văn bản trong React hơi khác so với HTML thông thường.
Trong HTML, giá trị của 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 vùng văn bản được đặt trong thuộc tính value. Chúng ta sẽ sử dụng useState Hook để quản lý giá trị của vùng văn bản:
Ví dụ:
Một vùng văn bản đơn giản với một số nội dung:
import { useState } from 'react'; import ReactDOM from 'react-dom/client'; 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> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyForm />);Lựa chọn
Danh sách thả xuống hoặc hộp chọn trong React cũng hơi khác so với HTML.
trong HTML, giá trị được chọn trong danh sách thả xuống được xác định bằng thuộc tính selected :
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 thuộc tính value trên thẻ select :
Ví 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.
