Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Formik là một thư viện dùng cho React.js giúp chúng ta xử lý các vấn đề liên quan đến form như kiểm tra dữ liệu hợp lệ trước khi gửi lên server (validation), thông báo lỗi nếu có,... các bạn có thể tìm hiểu về thư viện này tại đây.

Trong Formik có một thuộc tính tên là touched, có thể một số bạn đang tìm hiểu về thư viện này thắc mắc không biết thuộc tính này là gì, sử dụng trong trường hợp nào 😁. Đừng lo, trong bài viết này chúng ta sẽ cùng tìm hiểu thuộc tính này nhé.

Thuộc tính touched trong Formik

Thuộc tính touched trong Formik là một thông tin giúp chúng ta biết một field đã được user tương tác hay chạm (touched) vào hay chưa. Thuộc tính touched có giá trị boolean, nếu true có nghĩa là user đã tương tác vào field và ngược lại.

Thuộc tính này hữu ích khi chúng ta muốn hiển thị lỗi chỉ khi người dùng đã tương tác lên field. Để các bạn dễ hình dung thì mình sẽ lấy một ví dụ, đầu tiên tạo một form để người dùng nhập, form này có initialValues = {email: '', password: ''}.

Sử dụng Formik và chúng ta có một form như sau:

import { Formik } from "formik";

const App = () => (
  <div>
    <Formik
      initialValues={{ email: "", password: "" }}
      validate={(values) => {
        // xử lý validate đơn giản trong ví dụ này :)
        const errors = {};

        if (!values.email) errors.email = "Required";
        if (!values.password) errors.password = "Required";

        return errors;
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors, touched, handleSubmit, isSubmitting, getFieldProps }) => (
        <form onSubmit={handleSubmit}>
          <input placeholder="email" type="email" {...getFieldProps("email")} />
          {errors.email && errors.email}

          <input placeholder="password" type="password" {...getFieldProps("password")} />
          {errors.password && errors.password}

          <div>
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </div>
        </form>
      )}
    </Formik>
  </div>
);

export default App;

Ở đoạn code trên, chúng ta chưa sử dụng thuộc tính touched, điều kiện render là nếu có lỗi thì thông báo lỗi sẽ hiện ra {errors.email && errors.email}.

Bây giờ chúng ta thử điền vào field email và xem điều gì sẽ xảy ra nhé.

touched formik example

Như hình trên, chúng ta có thể thấy một thông báo lỗi từ field password sẽ hiện ra ngay khi chúng ta nhập vào field email 😯. Lý do xảy ra hành vi trên là chức năng validation của Formik chạy trên mỗi lần user nhập giá trị vào field, nếu xảy ra lỗi thì object errors sẽ chứa tất cả các lỗi xác thực tại bất kỳ thời điểm nào, do đó lỗi từ field password cũng được hiện ra. Điều này sẽ gây ra vấn đề trải nghiệm người dùng (user experience) không tốt vì nó sẽ hiển thị thông báo lỗi đối với các field mà user chưa sử dụng đến.

Để khắc phục vấn đề này, chúng ta sẽ sử dụng thêm thuộc tính touched nhằm kiểm tra xem user đã nhập giá trị vào ô input hay chưa, nếu đã nhập và xảy ra lỗi thì lỗi mới được hiển thị.

Kết quả chúng ta được như bên dưới 😁.

Để validation hiệu quả hơn, các bạn có thể kết hợp thêm package Yup. Formik có thể kết hợp với Yup rất hiệu quả các bạn nên trải nghiệm thử nhé 😁.


Hi vọng bài viết giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé 🎉.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.