Cách tạo biểu mẫu trong React
Biểu mẫu là một thành phần quan trọng của các ứng dụng web React . Chúng cho phép user trực tiếp nhập và gửi dữ liệu trong các thành phần khác nhau, từ màn hình đăng nhập đến trang thanh toán. Vì hầu hết các ứng dụng React là các ứng dụng trang đơn (SPA) hoặc các ứng dụng web tải một trang duy nhất qua đó dữ liệu mới được hiển thị động, bạn sẽ không gửi thông tin trực tiếp từ biểu mẫu tới server . Thay vào đó, bạn sẽ nắm bắt thông tin biểu mẫu ở phía client và gửi hoặc hiển thị nó bằng cách sử dụng mã JavaScript bổ sung.Các biểu mẫu React đưa ra một thách thức duy nhất vì bạn có thể cho phép trình duyệt xử lý hầu hết các phần tử biểu mẫu và thu thập dữ liệu thông qua các sự kiện thay đổi trong React hoặc bạn có thể sử dụng React để kiểm soát hoàn toàn phần tử bằng cách đặt và cập nhật trực tiếp giá trị đầu vào. Cách tiếp cận đầu tiên được gọi là thành phần không được kiểm soát vì React không cài đặt giá trị. Cách tiếp cận thứ hai được gọi là thành phần được kiểm soát vì React đang tích cực cập nhật đầu vào.
Trong hướng dẫn này, bạn sẽ xây dựng biểu mẫu bằng React và xử lý việc gửi biểu mẫu bằng một ứng dụng mẫu gửi yêu cầu mua táo. Bạn cũng sẽ tìm hiểu những ưu điểm và nhược điểm của các thành phần được kiểm soát và không được kiểm soát. Cuối cùng, bạn sẽ tự động đặt các thuộc tính biểu mẫu để bật và tắt các trường tùy thuộc vào trạng thái biểu mẫu. Đến cuối hướng dẫn này, bạn có thể tạo nhiều biểu mẫu khác nhau bằng cách sử dụng đầu vào văn bản, hộp kiểm, danh sách chọn và hơn thế nữa.
Yêu cầu
Bạn cần một môi trường phát triển chạy Node.js ; hướng dẫn này đã được thử nghiệm trên Node.js version 10.20.1 và npm version 6.14.4. Để cài đặt phần mềm này trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04 .
Môi trường phát triển React được cài đặt với Create React App , với phần trình bày không cần thiết bị xóa. Để cài đặt điều này, hãy làm theo Bước 1 - Tạo một dự án trống của hướng dẫn Cách quản lý trạng thái trên các thành phần lớp React . Hướng dẫn này sẽ sử dụng
form-tutoriallàm tên dự án.Bạn sẽ sử dụng các sự kiện React và Hooks, bao gồm
useStatevàuseReducerHooks. Bạn có thể tìm hiểu về các sự kiện trong hướng dẫn Cách xử lý sự kiện DOM và Window với React của ta và Hooks tại Cách quản lý trạng thái bằng Hooks trên các thành phần React .Bạn cũng cần kiến thức cơ bản về JavaScript và HTML, bạn có thể tìm thấy kiến thức này trong loạt bài Cách tạo trang web bằng HTML và trong Cách viết mã trong JavaScript . Kiến thức cơ bản về CSS cũng sẽ hữu ích, bạn có thể tìm thấy kiến thức này tại Mạng nhà phát triển Mozilla .
Bước 1 - Tạo biểu mẫu cơ bản với JSX
Trong bước này, bạn sẽ tạo một biểu mẫu trống với một phần tử duy nhất và một nút gửi bằng JSX . Bạn sẽ xử lý sự kiện gửi biểu mẫu và chuyển dữ liệu sang một dịch vụ khác.Đến cuối bước này, bạn sẽ có một biểu mẫu cơ bản sẽ gửi dữ liệu đến một hàm không đồng bộ .
Để bắt đầu, hãy mở App.js :
- nano src/components/App/App.js
Bạn sẽ xây dựng một biểu mẫu để mua táo. Tạo một <div> với className là <wrapper> . Sau đó, thêm <h1> với văn bản “How About Them Apples” và một phần tử form trống bằng cách thêm mã được đánh dấu sau:
import React from 'react'; import './App.css'; function App() { return ( <div className="wrapper"> <h1>How About Them Apples</h1> <form> </form> </div> ) } export default App; Tiếp theo, bên trong <form> , thêm phần tử <fieldset> với phần tử <input> bao quanh bởi <label> . Bằng cách bao bọc phần tử <input> bằng <label> , bạn đang hỗ trợ trình đọc màn hình bằng cách liên kết nhãn với đầu vào. Điều này sẽ tăng khả năng tiếp cận ứng dụng của bạn.
Cuối cùng, thêm một submit <button> ở cuối biểu mẫu:
import React from 'react'; import './App.css'; function App() { return( <div className="wrapper"> <h1>How About Them Apples</h1> <form> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu và đóng file . Sau đó, mở App.css để đặt kiểu:
- nano src/components/App/App.css
Thêm padding vào .wrapper và margin cho fieldset để cung cấp cho một số không gian giữa các yếu tố:
.wrapper { padding: 5px 20px; } .wrapper fieldset { margin: 20px 0; } Lưu và đóng file . Khi bạn làm như vậy, trình duyệt sẽ reload và bạn sẽ thấy một biểu mẫu cơ bản.
Nếu bạn nhấp vào nút Gửi , trang sẽ reload . Vì bạn đang xây dựng một ứng dụng trang đơn, bạn sẽ ngăn chặn hành vi tiêu chuẩn này đối với nút có type="submit" . Thay vào đó, bạn sẽ xử lý sự kiện submit bên trong thành phần.
Mở App.js :
- nano src/components/App/App.js
Để xử lý sự kiện, bạn sẽ thêm một trình xử lý sự kiện vào phần tử <form> , không phải <button> . Tạo một hàm có tên là handleSubmit sẽ lấy SyntheticEvent làm đối số. SyntheticEvent là một shell bọc xung quanh đối tượng Event chuẩn và chứa cùng một giao diện. Gọi .preventDefault để ngăn trang gửi biểu mẫu sau đó kích hoạt alert cho biết rằng biểu mẫu đã được gửi:
import React from 'react'; import './App.css'; function App() { const handleSubmit = event => { event.preventDefault(); alert('You have submitted the form.') } return( <div className="wrapper"> <h1>How About Them Apples</h1> <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu các file . Khi bạn thực hiện, trình duyệt sẽ reload . Nếu bạn nhấp vào nút gửi, cảnh báo sẽ bật lên, nhưng cửa sổ sẽ không reload .
Trong nhiều ứng dụng React, bạn sẽ gửi dữ liệu đến một dịch vụ bên ngoài, chẳng hạn như API Web. Khi dịch vụ giải quyết xong, bạn sẽ thường hiển thị thông báo thành công, chuyển hướng user hoặc thực hiện cả hai.
Để mô phỏng một API, hãy thêm một hàm setTimeout trong hàm handleSubmit . Thao tác này sẽ tạo ra một hoạt động không đồng bộ đợi một khoảng thời gian nhất định trước khi hoàn tất, hoạt động này hoạt động tương tự như một yêu cầu đối với dữ liệu bên ngoài. Sau đó, sử dụng useState Hook để tạo một biến submitting và một hàm setSubmitting . Gọi setSubmitting(true) khi dữ liệu được gửi và gọi setSubmitting(false) khi thời gian chờ được giải quyết:
import React, { useState } from 'react'; import './App.css'; function App() { const [submitting, setSubmitting] = useState(false); const handleSubmit = event => { event.preventDefault(); setSubmitting(true); setTimeout(() => { setSubmitting(false); }, 3000) } return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div>Submtting Form...</div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Ngoài ra, bạn sẽ cảnh báo user rằng biểu mẫu của họ đang gửi bằng cách hiển thị một thông báo ngắn trong HTML sẽ hiển thị khi submitting là true .
Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ reload và bạn sẽ nhận được thông báo khi gửi:
Đến đây bạn có một biểu mẫu cơ bản xử lý sự kiện gửi bên trong thành phần React. Bạn đã kết nối nó với JSX của bạn bằng cách sử dụng trình xử lý sự kiện onSubmit và bạn đang sử dụng Hooks để hiển thị cảnh báo có điều kiện trong khi sự kiện handleSubmit đang chạy.
Trong bước tiếp theo, bạn sẽ thêm nhiều đầu vào của user hơn và lưu dữ liệu vào trạng thái khi user điền vào biểu mẫu.
Bước 2 - Thu thập dữ liệu biểu mẫu bằng các thành phần không được kiểm soát
Trong bước này, bạn sẽ thu thập dữ liệu biểu mẫu bằng cách sử dụng các thành phần không được kiểm soát . Thành phần không được kiểm soát là thành phần không có value do React đặt. Thay vì đặt dữ liệu trên thành phần, bạn sẽ kết nối với sự kiện onChange để thu thập thông tin đầu vào của user . Khi bạn xây dựng các thành phần, bạn sẽ tìm hiểu cách React xử lý các loại đầu vào khác nhau và cách tạo một hàm có thể tái sử dụng để thu thập dữ liệu biểu mẫu vào một đối tượng duy nhất.
Khi kết thúc bước này, bạn có thể tạo một biểu mẫu bằng cách sử dụng các phần tử biểu mẫu khác nhau, bao gồm cả danh sách thả xuống và hộp kiểm. Bạn cũng sẽ có thể thu thập, gửi và hiển thị dữ liệu biểu mẫu.
Lưu ý: Trong hầu hết các trường hợp, bạn sẽ sử dụng các thành phần được kiểm soát cho ứng dụng React của bạn . Nhưng bạn nên bắt đầu với các thành phần không được kiểm soát để có thể tránh các lỗi nhỏ hoặc các vòng lặp ngẫu nhiên mà bạn có thể đưa vào khi đặt sai giá trị.
Hiện tại, bạn có một biểu mẫu có thể gửi thông tin, nhưng không có gì để gửi. Biểu mẫu có một phần tử <input> duy nhất, nhưng bạn không thu thập hoặc lưu trữ dữ liệu ở bất kỳ đâu trong thành phần. Để có thể lưu trữ và xử lý dữ liệu khi user gửi biểu mẫu, bạn cần tạo một cách để quản lý trạng thái . Sau đó, bạn cần kết nối với từng đầu vào bằng trình xử lý sự kiện.
Bên trong App.js , sử dụng useReducer Hook để tạo một đối tượng formData và một hàm setFormData . Đối với hàm giảm thiểu, hãy kéo name và value từ đối tượng event.target và cập nhật state bằng cách mở rộng trạng thái hiện tại trong khi thêm name và value vào cuối. Điều này sẽ tạo ra một đối tượng trạng thái duy trì trạng thái hiện tại trong khi overrides các giá trị cụ thể khi chúng thay đổi:
import React, { useReducer, useState } from 'react'; import './App.css'; const formReducer = (state, event) => { return { ...state, [event.target.name]: event.target.value } } function App() { const [formData, setFormData] = useReducer(formReducer, {}); const [submitting, setSubmitting] = useState(false); const handleSubmit = event => { event.preventDefault(); setSubmitting(true); setTimeout(() => { setSubmitting(false); }, 3000) } return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div>Submtting Form...</div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" onChange={setFormData}/> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Sau khi tạo bộ giảm, hãy thêm setFormData vào trình xử lý sự kiện onChange trên đầu vào. Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ reload . Tuy nhiên, nếu bạn thử và nhập thông tin đầu vào, bạn sẽ gặp lỗi:
Vấn đề là SyntheticEvent được sử dụng lại và không thể được chuyển cho một hàm không đồng bộ . Nói cách khác, bạn không thể vượt qua sự kiện trực tiếp. Để khắc phục điều này, bạn cần lấy dữ liệu cần thiết trước khi gọi hàm giảm thiểu.
Cập nhật hàm giảm thiểu để lấy một đối tượng có thuộc tính name và value . Sau đó, tạo một hàm có tên là handleChange để kéo dữ liệu từ event.target và chuyển đối tượng đến setFormData . Cuối cùng, cập nhật trình xử lý sự kiện onChange để sử dụng chức năng mới:
import React, { useReducer, useState } from 'react'; import './App.css'; const formReducer = (state, event) => {<^> return { ...state, [event.name]: event.value } } function App() { const [formData, setFormData] = useReducer(formReducer, {}); const [submitting, setSubmitting] = useState(false); const handleSubmit = event => { event.preventDefault(); setSubmitting(true); setTimeout(() => { setSubmitting(false); }, 3000); } const handleChange = event => { setFormData({ name: event.target.name, value: event.target.value, }); } return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div>Submtting Form...</div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" onChange={handleChange}/> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu các file . Khi bạn làm như vậy, trang sẽ làm mới và bạn có thể nhập dữ liệu.
Đến đây bạn đang thu thập trạng thái biểu mẫu, hãy cập nhật thông báo hiển thị user để hiển thị dữ liệu trong phần tử danh sách không có thứ tự ( <ul> ).
Chuyển đổi dữ liệu thành một mảng bằng Object.entries , sau đó ánh xạ trên dữ liệu chuyển đổi từng thành viên của mảng thành phần tử <li> có tên và giá trị. Hãy chắc chắn sử dụng name làm chỗ dựa key cho phần tử:
... return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div> You are submitting the following: <ul> {Object.entries(formData).map(([name, value]) => ( <li key={name}><strong>{name}</strong>:{value.toString()}</li> ))} </ul> </div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" onChange={handleChange}/> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu các file . Khi bạn thực hiện, trang sẽ reload và bạn có thể nhập và gửi dữ liệu:
Đến đây bạn đã có một biểu mẫu cơ bản, bạn có thể thêm nhiều phần tử hơn. Tạo một phần tử <fieldset> và thêm phần tử <select> với các giống táo khác nhau cho mỗi <option> , một <input> với type="number" và step="1" để có số lượng tăng lên 1 và <input> với type="checkbox" cho tùy chọn gói quà.
Đối với mỗi phần tử, hãy thêm hàm handleChange vào trình xử lý sự kiện onChange :
... return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div> You are submitting the following: <ul> {Object.entries(formData).map(([name, value]) => ( <li key={name}><strong>{name}</strong>: {value.toString()}</li> ))} </ul> </div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" onChange={handleChange}/> </label> </fieldset> <fieldset> <label> <p>Apples</p> <select name="apple" onChange={handleChange}> <option value="">--Please choose an option--</option> <option value="fuji">Fuji</option> <option value="jonathan">Jonathan</option> <option value="honey-crisp">Honey Crisp</option> </select> </label> <label> <p>Count</p> <input type="number" name="count" onChange={handleChange} step="1"/> </label> <label> <p>Gift Wrap</p> <input type="checkbox" name="gift-wrap" onChange={handleChange} /> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu các file . Khi bạn làm như vậy, trang sẽ reload và bạn sẽ có nhiều loại đầu vào cho biểu mẫu của bạn :
Có một trường hợp đặc biệt ở đây cần xem xét. value của hộp kiểm gói quà sẽ luôn ở trạng thái "on" , dù mục đó có được kiểm tra hay không. Thay vì sử dụng các sự kiện value , bạn cần phải sử dụng checked tài sản.
Cập nhật chức năng handleChange để xem liệu checkbox event.target.type có phải là checkbox . Nếu đúng như vậy, hãy chuyển thuộc tính event.target.checked làm value thay vì event.target.value :
import React, { useReducer, useState } from 'react'; import './App.css'; ... function App() { const [formData, setFormData] = useReducer(formReducer, {}); const [submitting, setSubmitting] = useState(false); const handleSubmit = event => { event.preventDefault(); setSubmitting(true); setTimeout(() => { setSubmitting(false); }, 3000); } const handleChange = event => { const isCheckbox = event.target.type === 'checkbox'; setFormData({ name: event.target.name, value: isCheckbox ? event.target.checked : event.target.value, }) } ... Trong mã này, bạn sử dụng dấu ? toán tử bậc ba để thực hiện câu lệnh điều kiện.
Lưu các file . Sau khi trình duyệt làm mới, hãy điền vào biểu mẫu và nhấp vào gửi. Bạn sẽ thấy rằng cảnh báo trùng với dữ liệu trong biểu mẫu:
Trong bước này, bạn đã học cách tạo các thành phần biểu mẫu không kiểm soát. Bạn đã lưu dữ liệu biểu mẫu vào một trạng thái bằng cách sử dụng useReducer Hook và sử dụng lại dữ liệu đó trong các thành phần khác nhau. Bạn cũng đã thêm các loại thành phần biểu mẫu khác nhau và điều chỉnh chức năng của bạn để lưu dữ liệu chính xác tùy thuộc vào loại phần tử.
Trong bước tiếp theo, bạn sẽ chuyển đổi các thành phần thành các thành phần được kiểm soát bằng cách đặt động giá trị thành phần.
Bước 3 - Cập nhật dữ liệu biểu mẫu bằng các thành phần được kiểm soát
Trong bước này, bạn sẽ tự động đặt và cập nhật dữ liệu bằng các thành phần được kiểm soát. Bạn sẽ thêm một value hỗ trợ vào mỗi thành phần để đặt hoặc cập nhật dữ liệu biểu mẫu. Bạn cũng sẽ đặt lại dữ liệu biểu mẫu khi gửi.
Đến cuối bước này, bạn có thể kiểm soát động dữ liệu biểu mẫu bằng cách sử dụng trạng thái React và đạo cụ.
Với các thành phần không được kiểm soát, bạn không phải lo lắng về việc đồng bộ hóa dữ liệu. Ứng dụng của bạn sẽ luôn tuân theo những thay đổi mới nhất . Nhưng có nhiều trường hợp bạn cần phải đọc và ghi vào một thành phần đầu vào. Để làm điều này, bạn cần giá trị của thành phần là động.
Trong bước trước, bạn đã gửi một biểu mẫu. Nhưng sau khi gửi biểu mẫu thành công, biểu mẫu vẫn chứa dữ liệu cũ. Để xóa dữ liệu khỏi mỗi đầu vào, bạn cần thay đổi các thành phần từ các thành phần không được kiểm soát thành các thành phần được kiểm soát.
Một thành phần được kiểm soát tương tự như một thành phần không được kiểm soát, nhưng React cập nhật phần hỗ trợ value . Nhược điểm là nếu bạn không cẩn thận và không cập nhật đúng cách thì value của nó sẽ bị hỏng và dường như sẽ không cập nhật.
Trong biểu mẫu này, bạn đã lưu trữ dữ liệu, vì vậy để chuyển đổi các thành phần, bạn sẽ cập nhật value chống đỡ với dữ liệu từ trạng thái formData :
... return( <div className="wrapper"> <h1>How About Them Apples</h1> {submitting && <div> You are submitting the following: <ul> {Object.entries(formData).map(([name, value]) => ( <li key={name}><strong>{name}</strong>: {value.toString()}</li> ))} </ul> </div> } <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" onChange={handleChange} value={formData.name}/> </label> </fieldset> <fieldset> <label> <p>Apples</p> <select name="apple" onChange={handleChange} value={formData.apple}> <option value="">--Please choose an option--</option> <option value="fuji">Fuji</option> <option value="jonathan">Jonathan</option> <option value="honey-crisp">Honey Crisp</option> </select> </label> <label> <p>Count</p> <input type="number" name="count" onChange={handleChange} step="1" value={formData.count}/> </label> <label> <p>Gift Wrap</p> <input type="checkbox" name="gift-wrap" onChange={handleChange} checked={formData['gift-wrap']}/> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Như trước đây, hộp kiểm có một chút khác biệt. Thay vì cài đặt một giá trị, bạn cần phải cài đặt các checked thuộc tính. Nếu thuộc tính là trung thực, trình duyệt sẽ hiển thị hộp như được chọn.
Nếu bạn muốn trước khi điền vào mẫu đơn, thêm một số dữ liệu mặc định cho formData nhà nước. Đặt giá trị mặc định cho count bằng cách đặt giá trị mặc định của formState là { count: 100 } :
... function App() { const [formData, setFormData] = useReducer(formReducer, { count: 100, }); const [submitting, setSubmitting] = useState(false); ... Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ reload và bạn sẽ thấy đầu vào với dữ liệu mặc định:
Lưu ý: Thuộc tính value khác với thuộc tính placeholder , có nguồn root trên trình duyệt. Thuộc tính placeholder hiển thị thông tin nhưng sẽ không xuất hiện ngay sau khi user thực hiện thay đổi; nó không được lưu trữ trên thành phần. Bạn có thể chủ động chỉnh sửa value , nhưng placeholder chỉ là hướng dẫn cho user .
Đến đây bạn có các thành phần đang hoạt động, bạn có thể xóa dữ liệu khi gửi. Để làm như vậy, hãy thêm một điều kiện mới trong formReducer của bạn. Nếu event.reset là true, hãy trả về một đối tượng có giá trị trống cho mỗi phần tử biểu mẫu. Đảm bảo thêm một giá trị cho mỗi đầu vào. Nếu bạn trả về một đối tượng trống hoặc một đối tượng không đầy đủ, các thành phần sẽ không cập nhật vì giá trị undefined được undefined .
Sau khi bạn thêm điều kiện sự kiện mới trong formReducer , hãy cập nhật chức năng gửi của bạn để đặt lại trạng thái khi chức năng giải quyết:
import React, { useReducer, useState } from 'react'; import './App.css'; const formReducer = (state, event) => { if(event.reset) { return { apple: '', count: 0, name: '', 'gift-wrap': false, } } return { ...state, [event.name]: event.value } } function App() { const [formData, setFormData] = useReducer(formReducer, { count: 100 }); const [submitting, setSubmitting] = useState(false); const handleSubmit = event => { event.preventDefault(); setSubmitting(true); setTimeout(() => { setSubmitting(false); setFormData({ reset: true }) }, 3000); } ... Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ reload và biểu mẫu sẽ rõ ràng khi gửi.
Trong bước này, bạn đã chuyển đổi các thành phần không được kiểm soát của bạn thành các thành phần được kiểm soát bằng cách đặt value hoặc các thuộc tính checked động. Bạn cũng đã học cách nạp lại dữ liệu bằng cách đặt trạng thái mặc định và cách xóa dữ liệu bằng cách cập nhật trình giảm biểu mẫu để trả về giá trị mặc định.
Trong bước tiếp theo này, bạn sẽ đặt động các thuộc tính thành phần của biểu mẫu và vô hiệu hóa biểu mẫu khi đang gửi.
Bước 4 - Cập nhật động các thuộc tính biểu mẫu
Trong bước này, bạn sẽ cập nhật động các thuộc tính của phần tử biểu mẫu. Bạn sẽ đặt các thuộc tính dựa trên các lựa chọn trước đó và vô hiệu hóa biểu mẫu của bạn trong quá trình gửi để ngăn việc gửi nhiều lần ngẫu nhiên.
Hiện tại, mỗi thành phần là tĩnh. Chúng không thay đổi khi biểu mẫu thay đổi. Trong hầu hết các ứng dụng, biểu mẫu là động. Các trường sẽ thay đổi dựa trên dữ liệu trước đó. Họ sẽ xác thực và hiển thị lỗi. Chúng có thể biến mất hoặc mở rộng khi bạn điền vào các thành phần khác.
Giống như hầu hết các thành phần React, bạn có thể đặt động các thuộc tính và thuộc tính trên các thành phần và chúng sẽ hiển thị lại khi dữ liệu thay đổi.
Thử đặt một đầu vào bị disabled cho đến khi một đầu vào khác đáp ứng một điều kiện. Cập nhật hộp kiểm gói quà sẽ bị tắt trừ khi user chọn tùy chọn fuji .
Bên trong App.js , thêm thuộc tính đã disabled vào hộp kiểm. Làm cho thuộc tính trung thực nếu formData.apple là fuji :
... <fieldset> <label> <p>Apples</p> <select name="apple" onChange={handleChange} value={formData.apple}> <option value="">--Please choose an option--</option> <option value="fuji">Fuji</option> <option value="jonathan">Jonathan</option> <option value="honey-crisp">Honey Crisp</option> </select> </label> <label> <p>Count</p> <input type="number" name="count" onChange={handleChange} step="1" value={formData.count}/> </label> <label> <p>Gift Wrap</p> <input checked={formData['gift-wrap']} disabled={formData.apple !== 'fuji'} name="gift-wrap" onChange={handleChange} type="checkbox" /> </label> </fieldset> <button type="submit">Submit</button> </form> </div> ) } export default App; Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ reload và hộp kiểm sẽ bị tắt theo mặc định:
Nếu bạn chọn loại táo Fuji , phần tử sẽ được bật:
Ngoài việc thay đổi các thuộc tính trên các thành phần riêng lẻ, bạn có thể sửa đổi toàn bộ group của các thành phần bằng cách cập nhật fieldset thành phần.
Ví dụ: bạn có thể vô hiệu hóa biểu mẫu trong khi biểu mẫu đang tích cực gửi. Điều này sẽ ngăn chặn đệ trình kép và ngăn chặn user thay đổi các trường trước khi handleSubmit chức năng hoàn toàn giải quyết.
Thêm disabled={submitting} vào mỗi phần tử <fieldset> và phần tử <button> :
... <form onSubmit={handleSubmit}> <fieldset disabled={submitting}> <label> <p>Name</p> <input name="name" onChange={handleChange} value={formData.name}/> </label> </fieldset> <fieldset disabled={submitting}> <label> <p>Apples</p> <select name="apple" onChange={handleChange} value={formData.apple}> <option value="">--Please choose an option--</option> <option value="fuji">Fuji</option> <option value="jonathan">Jonathan</option> <option value="honey-crisp">Honey Crisp</option> </select> </label> <label> <p>Count</p> <input type="number" name="count" onChange={handleChange} step="1" value={formData.count}/> </label> <label> <p>Gift Wrap</p> <input checked={formData['gift-wrap']} disabled={formData.apple !== 'fuji'} name="gift-wrap" onChange={handleChange} type="checkbox" /> </label> </fieldset> <button type="submit" disabled={submitting}>Submit</button> </form> </div> ) } export default App; Lưu file và trình duyệt sẽ làm mới. Khi bạn gửi biểu mẫu, các trường sẽ bị vô hiệu hóa cho đến khi chức năng gửi giải quyết:
Bạn có thể cập nhật bất kỳ thuộc tính nào trên một thành phần đầu vào. Đây là hữu ích nếu bạn cần phải thay đổi maxvalue cho một đầu vào số hoặc nếu bạn cần phải thêm một động pattern thuộc tính để xác nhận.
Trong bước này, bạn đặt động các thuộc tính trên các thành phần biểu mẫu. Bạn đã thêm một thuộc tính để bật hoặc tắt động một thành phần dựa trên đầu vào từ một thành phần khác và bạn đã tắt toàn bộ các phần bằng cách sử dụng thành phần <fieldset> .
Kết luận
Biểu mẫu là key cho các ứng dụng web phong phú. Trong React, bạn có các tùy chọn khác nhau để kết nối và kiểm soát các biểu mẫu và phần tử. Giống như các thành phần khác, bạn có thể cập nhật động các thuộc tính bao gồm các phần tử đầu vào value . Các thành phần không được kiểm soát là tốt nhất để đơn giản hóa, nhưng có thể không phù hợp với các tình huống khi một thành phần cần được xóa hoặc điền trước dữ liệu. Các thành phần được kiểm soát cung cấp cho bạn nhiều cơ hội hơn để cập nhật dữ liệu, nhưng có thể thêm một mức trừu tượng khác có thể gây ra lỗi hoặc kết xuất không chủ ý.
Dù cách tiếp cận của bạn là gì, React cung cấp cho bạn khả năng tự động cập nhật và điều chỉnh các biểu mẫu của bạn cho phù hợp với nhu cầu của ứng dụng và user của bạn.
Nếu bạn muốn đọc thêm các hướng dẫn về React, hãy xem trang Chủ đề React của ta hoặc quay lại trang Cách viết mã trong chuỗi React.js .
Các tin liên quan
