Quản lý trạng thái biểu mẫu phản ứng với formik

Sep 17, 2025

Cách

(Tín dụng hình ảnh: Matt Crouch)

Chào mừng bạn đến hướng dẫn của chúng tôi về cách quản lý trạng thái biểu mẫu phản ứng với formik. Các yếu tố hình thức giữ các giá trị của họ trong trạng thái nội bộ của riêng họ - với tỷ lệ cược với cách tiếp cận trạng thái của React. Để làm cho hai công việc cùng nhau, chúng ta cần một giải pháp liên quan nhiều hơn, chẳng hạn như sử dụng các thành phần được kiểm soát cho từng lĩnh vực.

Nhưng có nhiều khía cạnh khác để tạo biểu mẫu hơn là chỉ chụp dữ liệu. Chúng ta cần kiểm tra định dạng là chính xác, tất cả các trường bắt buộc đã được đặt và mọi thứ đã được gửi thành công khi gửi. Điều đó dẫn đến rất nhiều logic phức tạp có thể tích tụ nhanh. Đây là nơi Formik có thể giúp đỡ.

Để biết thêm tài nguyên để giúp cải thiện thiết kế web của bạn, hãy xem bản tóm tắt của chúng tôi về Công cụ thiết kế web và lưu trữ đám mây tùy chọn. Bắt đầu từ số không? Chọn quyền người tạo ra trang web và nhận được của bạn web hosting Dịch vụ ngay với các vòng tròn của chúng tôi.

Tải xuống các tệp nguồn

Formik là gì?

Formik. là một thư viện nhẹ xử lý những vấn đề này. Bằng cách gói một biểu mẫu với các thành phần được cung cấp, chúng tôi nhận được rất nhiều hành vi này miễn phí. Tất cả những gì chúng ta cần cung cấp là mã để xử lý những gì làm cho hình thức của chúng ta trở nên độc đáo.

Để giúp chúng tôi khám phá những gì Formik có thể làm, chúng tôi sẽ xây dựng một ứng dụng bỏ phiếu nhỏ. Người dùng có thể nhập tên của họ và bỏ phiếu trên một trong các tùy chọn được cung cấp. Nếu mọi thứ đều ổn, biểu mẫu sẽ gửi nhưng nếu không, người dùng nhận được thông báo lỗi.

01. Bắt đầu

Để bắt đầu, hãy mở thư mục 'Hướng dẫn' từ các tệp hướng dẫn trên dòng lệnh. Cài đặt các phụ thuộc và khởi động máy chủ. Ứng dụng này được xây dựng khi tạo-React-App và bao gồm các gói của nó, cùng với chính Formik và một vài người khác để giúp đỡ với kiểu dáng.

 & gt; Cài đặt NPM
& gt; NPM bắt đầu

Máy chủ phát triển sẽ bắt đầu và ứng dụng sau đó mở trong trình duyệt. Tệp App.js kiểm soát toàn bộ ứng dụng sẽ khiến thành phần container của chúng ta cho biểu mẫu. Mở ra src / app.js. và nhập khẩu & lt; vertecontainer & gt; thành phần.

 Nhập Votecontainer từ "./votecontainer";

Sau đó thêm nó vào ứng dụng.

 & lt; phần ClassName = "Vote-Container" & GT;
  & lt; cotecontainer / & gt;
& lt; / phần & gt;

02. Tạo mẫu formik

Các hình thức formik có thể được tạo theo hai cách. Các withformik. Thành phần bậc cao cho phép chúng tôi bọc một thành phần hiện có hoặc sử dụng & lt; formik & gt; Thành phần với một prop kết xuất thực hiện cùng một chức năng, đó là những gì chúng ta sẽ sử dụng.

Bên trong VoteContainer.js, tạo một thành phần chức năng sẽ giữ tất cả logic cho biểu mẫu. Điều này trả về A. & lt; formik & gt; thành phần làm cho biểu mẫu của chúng tôi. Cung cấp một giá trị khởi động cho các trường chúng ta sẽ thêm vào sau thông qua giá trị ban đầu Dự luật.

 Nhập {formik} từ "formik";
Nhập khẩu phiếu bầu từ "./vote";

Chức năng VoteContainer () {
  trở lại & lt; formik
    giá trị ban đầu = {{tên: "", trả lời: ""}}
render = {props = & gt; & lt; bỏ phiếu {... đạo cụ} / & gt;} / & gt;

03. Tạo thành phần bình chọn

Các & lt; Bầu chọn & GT; Thành phần giữ cấu trúc biểu mẫu. Bằng cách tách logic formik, chúng ta có thể giữ thành phần biểu mẫu đơn giản nhất có thể.

Tạo một thành phần bình chọn bên trong Vote.js sử dụng & lt; hình thức & gt; thành phần từ formik. Thêm một nút để gửi biểu mẫu như bình thường.

 Nhập {Mẫu} từ "formik";
Chức năng bỏ phiếu () {
  trở về (
    & lt; form classname = "phiếu bầu" & gt;
      & lt; nhập loại = "gửi" giá trị = "bỏ phiếu ngay" / & gt;
    & lt; / form & gt;
  );
}

04. Thêm các trường

Formik theo dõi các thay đổi đối với từng trường và sẽ cung cấp cho họ một khi biểu mẫu được gửi. Nó thực hiện tất cả điều này thông qua các sự kiện phát ra từ mẫu và từng lĩnh vực trong đó.

Ở cấp độ mẫu có hai sự kiện cụ thể - gửi và thiết lập lại. Khi một biểu mẫu gửi, chúng tôi cần formik để tiếp quản và thực hiện séc của nó, với sự kiện đặt lại xóa trạng thái. NHẬP KHẨU. & lt; hình thức & gt; Thành phần ràng buộc các sự kiện này cho formik.

Bây giờ chúng ta có thể bắt đầu thêm trường đầu tiên của chúng tôi. Mỗi phiếu bầu cần phải được kèm theo một tên, có nghĩa là chúng ta cần một đầu vào văn bản trước.

Các & lt; lĩnh vực & gt; Thành phần làm cùng một công việc như & lt; hình thức & gt; làm cho toàn bộ hình thức. Nó liên kết các sự kiện và đạo cụ cần thiết như tên và giá trị để hiển thị trạng thái trường.

Thêm một trường vào biểu mẫu và kết nối nó với nhãn. Những công việc này như trong các hình thức HTML thông thường.

 Nhập {trường} từ "formik";
& lt; nhãn HTMLFOR = "tên" & gt; tên & lt; / nhãn & gt;
& lt; trường autocomplete = "tên" id = "tên" tên = "tên" type = "văn bản" / & gt;

05. LOGIC CUNG CẤP.

Chúng tôi không cần phải làm việc với bất kỳ sự kiện trình duyệt nào để gửi, như onsubmit. Sự kiện được xử lý cho chúng tôi. Nhưng chúng ta cần cung cấp logic để xử lý việc gửi. Cuộc gọi lại vẫn được gọi là onsubmit. Nhưng thay vào đó, nó nhận được các giá trị biểu mẫu trực tiếp. Nó cũng nhận được 'Túi' - một đối tượng chứa một vài phương thức để tương tác với biểu mẫu trong khi nó gửi.

Vì dữ liệu này thường sẽ hướng đến một máy chủ, chức năng này cũng có thể không đồng bộ. Formik có một đặc biệt sắp xếp Dự luật mà nó đặt thành TRUE tự động sau khi đệ trình bắt đầu. Với chức năng Async, chúng ta có thể đợi cho đến khi biểu mẫu đã gửi và đặt lại đó về false.

Quay lại bên trong VoteContainer.js, chúng tôi có thể thêm logic nộp của chúng tôi. Tạo chức năng và truyền nó cho & lt; formik & gt; thành phần. Trong ví dụ này, chúng tôi sẽ không gửi đến máy chủ nhưng chúng tôi có thể sử dụng một lời hứa bị trì hoãn để mô phỏng độ trễ mạng.

 const onsubmit = async (giá trị, túi) = & gt; Đồn là
    chờ đợi lời hứa mới (giải quyết = & gt; setTimeout (giải quyết, 1000));
    bag.setsubmit (sai);
    Console.log ("Mẫu đã gửi", giá trị);
  };
return & lt; formik [...] onsubmit = {onsubmit} / & gt ;;

06. Hiển thị trạng thái.

Chúng ta cũng cần hiển thị trạng thái gửi đó trong biểu mẫu. Để ngăn chặn một đệ trình kép, chúng ta có thể vô hiệu hóa nút trong khi mẫu đang gửi. Formik chuyển cái này vào mẫu bên trong Vote.js như một prop. Chúng ta có thể kéo cái này ra và áp dụng nó vào nút.

 Bỏ phiếu chức năng ({sắp xếp}) {[...]}
& lt; đầu vào bị vô hiệu hóa = {assubmitt} type = "Gửi" giá trị = "bỏ phiếu ngay bây giờ" / & gt;

07. Thêm trường tên

Hiện tại biểu mẫu có thể được gửi mà không có tên được nhập. Vì đây là một trường bắt buộc, chúng ta nên gắn cờ điều này cho người dùng.

Gốc & lt; formik & gt; Thành phần cũng có một prop xác thực, là một hàm thực hiện xác nhận và trả về một đối tượng. Mỗi cặp khóa-giá trị đại diện cho một trường và một thông báo lỗi. Nếu một trường không có giá trị trong đối tượng này, nó được coi là hợp lệ. Biểu mẫu sẽ chỉ gửi khi hàm này trả về một đối tượng trống. Hàm nhận các giá trị biểu mẫu dưới dạng đối số. Đối với một trường bắt buộc, chúng ta chỉ cần kiểm tra giá trị không phải là một chuỗi rỗng.

Quay lại bên trong VoteContainer.js, tạo một hàm gọi lại xác thực để kiểm tra giá trị này và móc nó lên formik.

 Const xác nhận = giá trị = & gt; Đồn là
    lỗi sao = {};
    if (giá trị.name === "") {
      Lỗi.name = "Tên là bắt buộc";
    Không thể
    lỗi trả lại;
  };
return & lt; formik [...] xác thực = {xác thực} / & gt ;;

08. Lỗi hiển thị

Những lỗi này sau đó được truyền cho Vote.js như một lỗi prop. Để hiển thị lỗi nội tuyến, chúng ta cần khớp các lỗi với trường biểu mẫu cụ thể.

 Chức năng bỏ phiếu ({sắp xếp, lỗi, chạm}) {[...]}
& lt; div classname = "nhóm đầu vào" & gt;
  & lt; nhãn HTMLFOR = "tên" & gt; tên & lt; / nhãn & gt;
  & lt; div
    className = {ClassNames ({
      "Xác thực-Nhóm": Đúng,
      Lỗi: !! Lỗi.name & amp; & amp; chạm vào.name.
    })}
  & gt;
    & & lt; trường autocomplete = "tên" id = "tên" tên = "tên" type = "văn bản" / & gt;
    {!! Lỗi.name & amp; & amp; chạm.name & amp; & amp; (
      & lt; div classname = "thông báo lỗi" & gt; {errors.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik sẽ xác nhận biểu mẫu mỗi khi nó cập nhật. Một hình thức với rất nhiều trường sẽ ngay lập tức bị ngập sau các lỗi sau lần thay đổi đầu tiên. Để tránh điều này, chúng tôi chỉ hiển thị lỗi khi một trường đã được 'chạm', có nghĩa là nó đã được tương tác tại một số điểm. Khi một biểu mẫu gửi, formik sẽ chạm vào tất cả các trường và hiển thị bất kỳ lỗi ẩn nào.

09. Thêm trường Trả lời

Với trường tên hoàn tất, chúng ta có thể chuyển đến câu trả lời. Cách tiếp cận chúng ta đã sử dụng rất xa hoạt động tốt cho các đầu vào văn bản thông thường nhưng không phù hợp với nhiều đầu vào thuộc cùng một tên trường, chẳng hạn như một nhóm các nút radio.

Trong khi chúng ta có thể bao gồm nhiều & lt; lĩnh vực & gt; Các thành phần có cùng tên, chúng ta nên tránh lặp lại nhiều nhất có thể. Thay vào đó, formik cho phép chúng tôi vượt qua một thành phần tùy chỉnh vào & lt; lĩnh vực & gt; Điều đó có thể quản lý chúng như một.

Các & lt; Trả lời nhóm & gt; Thành phần hoạt động tương tự như đầu vào văn bản. Nó cần một tùy chọn prop, là một mảng chứa các tùy chọn để hiển thị. Chúng được chuyển thành các nút radio theo kiểu cho phép người dùng chọn một câu trả lời. Bao gồm thành phần này trong Vote.js. Bằng cách sử dụng & lt; lĩnh vực & gt; Nó được thông qua các đạo cụ tương tự như đầu vào tên cũng như bất kỳ tính năng bổ sung nào, trong trường hợp này Tùy chọn không thay đổi.

 Nhập câu trả lời từ "./answergroup";
& lt; thành phần trường = {assebroup} Tùy chọn = {Tùy chọn} Tên = "Trả lời" / & gt;

Cuối cùng, chúng ta cần yêu cầu một câu trả lời trong hàm xác nhận của chúng tôi trong VoteContainer.js là tốt. Quá trình có giống như với trường tên.

 if (value.answer === "") {
  Lỗi.Answer = "Trả lời là bắt buộc";

Bằng cách giữ cho xác nhận và gửi logic riêng biệt và sử dụng formik để khâu mọi thứ lại với nhau, chúng tôi có thể giữ cho mỗi mảnh nhỏ và dễ hiểu.

Nội dung này ban đầu xuất hiện trong Tạp chí Net. . Đọc thêm Bài viết thiết kế web ở đây .

Đọc thêm:

Cách kiểm tra các trang web và ứng dụng phản ứng
6 xu hướng thiết kế web lớn cho năm 2020
Sư phụ tối giản trong thiết kế web

Quản lý trạng thái biểu mẫu phản ứng với formik

Formik là gì?

01. Bắt đầu

02. Tạo mẫu formik

03. Tạo thành phần bình chọn

04. Thêm các trường

05. LOGIC CUNG CẤP.

06. Hiển thị trạng thái.

07. Thêm trường tên

08. Lỗi hiển thị

09. Thêm trường Trả lời

Cách - Các bài báo phổ biến nhất

Thêm hỗ trợ đa ngôn ngữ cho Angular

Thiết kế Avatar có thể chơi được cho một trò chơi video

Làm thế nào để tạo Kinh thánh nhân vật của riêng bạn

Cách tạo Quái vật kiểu Labyrinth của Pan

Làm cỏ trong động cơ không thật

Cách thêm kết cấu vào phấn màu của bạn với mồi

Tạo một thiết kế logo hình học hoàn hảo trong Illustrator

Cách tạo Snapchat Geofilter trong Photoshop

Thể loại