Gọi method từ class cha trong ReactJS

#1

Chào mọi người, em đang gặp chút rắc rối với xử lí form. Chuyện là em có Form component là class cha của InputField, em muốn khi nhấn nút submit ở Form thì nó sẽ lần lượt gọi hàm validate() của từng InputField để check xem form có hợp lệ không. Có các cách nào để gọi hàm đó ạ? Vì em research trên google thì có cách tạo từng ref cho từng InputField nhưng như vậy khó reuse lại được ạ!

image
image1920×1080 338 KB

image
image1920×1080 300 KB

#2

nếu mà muốn handle validate nhiều thì dùng mấy cái library Form ở ngoài sẽ khoẻ hơn như Formik hay React-hook-form.

5 Likes
#3

Bạn nên dùng stateless component cho trường hợp này
Bạn có thể tạo 1 state ở component Form như là

const [isFormValid, setFormValid] = useState(false)

Tạo 1 function để set value cho biến isFormValid

const updateFormValid = val => setFormValid(val)

xong truyền function updateFormValid vào các component
<InputField updateFormValid={updateFormValid} />

Bên trong component <InputField /> bất cứ chỗ nào sai rule do bạn đặt ra thì cứ dùng function updateFormValid(false) để update lại state của component Form

rồi trong function onSubmitForm của bạn thì cứ check xem biến isFormValid đang true hay false là được
sẵn tiện bạn nên để thằng component Form nắm tất cả dữ liệu nhé, mình thấy trong mỗi component InputField đều giữ value riêng, cái này là bad pattern trong việc xử lý form

4 Likes
#4

Form của mình giữ hết values với errors của các input đó bạn, mình truyền 2 hàm setFormValue vs setErrorMessages qua props để InputField update các giá trị đó. Solution của bạn cũng là ý tưởng đầu tiên của mình, nhưng nó quay lại câu hỏi là làm sao để call hàm updateFormValid trong InputField nếu như khách vừa vào form đã submit

#5

Thanks bạn, tại lần đầu mình tiếp xúc với form trong react nên muốn tự code thử :3

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?