Two-way binding | Ràng buộc hai chiều | React hooks
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong bài học này chúng ta sẽ cùng tìm hiểu về khái niệm Two-way binding | Ràng buộc hai chiều | React hooks
Two-way binding là ràng buộc dữ liệu 2 chiều, điều này thường được nhắc tới khi các bạn làm việc với biểu mẫu (form) trong các lib/framework front-end. Trong video này chúng ta sẽ cùng nhau đi qua các ví dụ để các bạn có thể ứng dụng được useState() nhé.
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
![[TH] 2024 PMSL SEA Finals D2 | Fall | ต้องรักษาฟอร์ม อย่ายอมให้ใครแซง](http://i.ytimg.com/vi/x38QsGn7A3M/mqdefault.jpg)
React là 1 (one) way binding. Việc chúng ta binding state vào value của input để nó trở thành 2 (two) ways binding các bạn nhé. Khi đi phỏng vấn, NTD mà hỏi React là 1 way binding hay 2 ways binding thì các bạn trả lời là 1 way binding nhé (mình có nói ở 08:12).
Các bạn tham khảo thêm:
- reactjs.org/docs/two-way-binding-helpers.html (helper dùng cho React < v15 để dễ dàng triển khai 2 ways binding)
- reactgo.com/two-way-data-binding-react/
A có thể giải thích hàm handleCheck 1 nơi dùng object course.id, 1 nơi dùng id không ạ, mong a phản hồi sớm
Thầy Sơn dạy dễ hiểu ghê luôn, mang lại kiến thức rất khác biệt, có thể áp dụng vào các dự án thực tế, vừa kĩ càng, vừa chứa lượng kiến thức rất lớn luôn
Thầy dạy siêu có tâm, em học đi học lại bài này cố gắng nuốt từng chữ thầy dạy. Em cảm ơn thầy nhiều ạ
Nếu có kiếp sau em nguyện làm vợ a Sơn để chăm sóc cho a cả đời
kaka
Đến chịu
anh dạy cực hay, cực có tâm, cực chi tiết, xem của anh xong xem những người khác thấy chênh lệch thật sự, cảm ơn anh, chúc anh nhiều sức khỏe
Cảm ơn những kiến thúc anh chia sẻ, xem video của anh có thể nói là kỹ càng từng chút một, em học hỏi được rất nhiều kiến thức từ những video của anh. Cảm ơn anh đã mang giá trị rất lớn cho cộng đồng coder .
trước em học đến đây ko biết vận dụng vào kiểu gì bây giờ anh dạy kèm ví dụ đúng tuyệt với luôn mong là mỗi hook anh đều có ví dụ
Như em mới học thì em thấy những cái nào khó hiểu trong React?
Ví dụ checked đưa ra quá hay. Thông não. Like!
đang khó state này vô xem video của a cái làm được luôn
Em cảm ơn anh ạ. Nhờ có phần checkbox của anh mà em hiểu thêm bản thân cần cải thiện thêm về logic ạ .
Đúng rồi em, làm lập trình thì mình cần nảy ra cách làm với logic trước rồi mới làm
hay anh. Kiến thức này ở các kênh khác không có.
Giúp em hiểu rõ hơn về React.
Thanks anh nhiều!
Đã học và hiểu. Cảm ơn thầy Sơn rất nhiều
import { useState } from "react";
const giftList = ["CPU i9", "RAM 32GB RGB", "RGB Keyboard"];
const courseList = [
{
id: 1,
name: "HTML, CSS",
},
{
id: 2,
name: "Javascript",
},
{
id: 3,
name: "ReactJs",
},
];
function App() {
const [gift, setGift] = useState();
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [checked, setChecked] = useState(2);
const [checkedBox, setCheckedBox] = useState([]);
const handleRandomGift = () => {
const index = Math.floor(Math.random() * giftList.length);
setGift(giftList[index]);
};
const handleSubmit = () => {
console.log({ name, email });
};
const handleSubmitCourse = () => {
console.log({ id: checked });
};
const handleCheckBox = (id) => {
setCheckedBox((prevState) => {
const isCheckedBox = checkedBox.includes(id);
if (isCheckedBox) {
return checkedBox.filter((item) => item !== id);
} else {
return [...prevState, id];
}
});
};
const handleSubmitCourseBox = () => {
console.log({ idList: checkedBox });
};
return (
{gift || "Chưa có phần thưởng"}
Lấy thưởng
Name:
setName(e.target.value)} />
Email:
setEmail(e.target.value)} />
Register
{courseList.map((course) => (
setChecked(course.id)}
id={`course-${course.id}`}
/>
{course.name}
))}
Submit Course
{courseList.map((course) => (
handleCheckBox(course.id)}
id={`course-checkbox-${course.id}`}
/>
{course.name}
))}
Submit Course
);
}
export default App;
cảm ơn anh đã gợi ý một ý tưởng hay phần checkbox
Ân nhân của em đây rồi. Đúng phần checkbox em cần
Em phải coi đi coi lại cái đoạn logic đấy, anh đã giải thích kỹ mà e đọc vẫn lú =)))
Anh giảng hay quá. Cám ơn anh.
Hay quá anh . Giờ e được thông não 🤩🤩
Cho em hỏi chỗ 21:30 sao không dùng onChange={handleCheck(id)} được mà phải dùng onChange={() => handleCheck(id)} vậy ạ?
với reactjs nó sẽ tự chạy dòng mặc dù bạn chưa gọi hàm đó . Nên sẽ để lồng thêm hàm ở ngoài nữa
() là dấu gọi hàm nếu bạn gọi handleCheck(id) thì khi load giao diện lên nó sẽ chạy hàm đó luôn mặc dù bạn chưa click vào button
Thuật ngữ Two-way binding nó same same như controlled component và One-way binding nó là uncontrolled component cho ae nào chưa biết
tks anh video bổ ích quá ạ
Bài này a giảng hay quá
dạy cuốn thực sự, cám ơn bạn nhiều!
Clip anh làm vui quá
đợi mãi a sơn mới ra
anh dạy dễ hiểu thiệt sự ❤❤❤
Em làm giống anh mà cmp của em khi khởi tạo hay khi setState đều bị re-render 2 lần(cả ví dụ change input đơn giản code giống a). Anh giải thích hộ em chỗ này vs ạ
import {useState} from "react"
import React,{useState} from "react"
function App() {
const [job,setJob] = useState('');
console.log(job)// bị re-render 2 lần mỗi khi setJob hoặc khởi tạo cmp
return (
setJob(e.target.value)}/>
Add
);
}
export default App;
** note: Em học tới bài useEffect thì đã tìm ra nguyên nhân r ạ. Do thằng => log ra 2 lần :((
Mình xem tuần tự nên đến video này cũng bị giống bạn loay hoay suốt không hiểu tại sao 🥲
xem đến useEffect là hiểu hả bn mình cũng bị v
Mong khóa Node sắp tới của anh Sơn sẽ là NestJS ạ
Vãi thầy nói nhầm :)), cơ mà vẫn dễ hiểu ạ hehe
với ví dụ của checkbox thì ko cần attribute checked={checked.includes(course.id)} cũng được ạ
bài này quá hay luôn
Không sao đâu anh ơi, đoạn đấy nghe phát biết anh nói nhầm mà =)))))
Oki thế thì ngon, anh kiểu bị ám ảnh ấy haha. Rõ ràng học tới đây ai cũng phải hiểu rõ về array methods rồi mà anh cứ đi lo thừa 🤣
@@F8VNOfficial anh có dặn là phải học kỹ lại js cơ bản rồi mới qua react mà 🤣 nên em nghĩ mn đều hiểu
cảm ơn thầy rất nhiều !
Anh bị ám ảnh sự hoàn hảo hả a >
Em hiểu rõ về cái này ko, có vẻ anh bị thế thật hic
@@F8VNOfficial dạ hong anh ơi 😂😂😂😂
@@F8VNOfficial hehe, nhờ thầy Sơn có sự cầu toàn trong mọi việc, nên các bài giảng của thầy lúc nào cũng đi vô rất rất là chi tiết v nè, ai xem kênh thầy đều có và sẽ có cái nền móng vững vàng lắm luôn, mãi iu thầy giáo Sơn
@@F8VNOfficial có câu "nhất cần thiên hạ vô nan sự" đấy anh. Hiểu nôm na là khi một người thể hiện sự tươm tất của mình thì người xung quanh cũng được hưởng phúc từ cái sự chu đáo của người đó nữa.
Bắt đầu thấy căng căng rồi
bài hay quá anh ơi em xem tận 3 lần vẫn chưa hiểu phai tin
Anh Sơn ơi.Bao giờ anh ra xong khóa reactjs thì anh ra react native nhé anh
yêu thầy Sơn
a Sơn đúng kiểu chơi html element thuần :v ngoài kia toàn mấy ông chơi Formik, React Hook form
Share kiến thức thì share phần base thôi em. Sau anh em thích dùng cái gì thì đọc docs dùng mà vẫn hiểu bản chất. Dùng lib ngay nhiều khi không hiểu nó làm gì
Thầy sơn làm khóa React Naitve đi ạ
Quá hay
mn cho em hỏi là khi onchane gọi đến setChecked thì nó phải render hết lại thì tại sao nó vẫn giữ trạng thái được chọn nhỉ, em nghĩ khi render lại thì không còn cái nào được chọn chứ ạ
Có extension nào gợi ý html với css trong js ko ạ
bài này khá khoa
Sao nhìn anh SƠn giống diễn viên trong phim "hương vị tình thần" thế nhỉ?
Trong bài học này và so sánh với vue khi sử dụng devtool của 2 thằng thì e thấy các state (có thể gọi là biến) trong reactjs không chi tiết như VueJs, vì trong vue các state hiện hẳn tên của state chứ ko như ReactJs chỉ hiện "State"
13:00 bỏ value trong input đi nó vẫn in ra được trong console.log mà b 😅
Mọi người cho mình hỏi: 1) Sao chỗ syle này lại cần 2 ngoặc nhọn nhỉ. mình để 1 thì báo lỗi, 2) tại sao lại để là 32 mà không phải là 32px vậy. Mong mọi người giải đáp giúp mình.
Bạn xem lại bài JSX nhé
ở 27:00 line 35 nó là return prev.filter(item=>item !== id) chứ nhỉ ?
chào anh 🙌🙌
Kiểu dử liệu tham chiếu trong js ở video nào v anh
Mn cho e hỏi. E làm phần checkbox ko cần có đoạn "checked = {checked.includes(course.id)}" để hiển thị phần được chọn như của a Sơn, nhưng kết quả vẫn đúng thì ntn ạ. Vì trong video e thấy nếu ko có thì nó sẽ ko hiện lên cái tick màu xanh ạ.
Trong trường hợp giá trị khởi tạo là mảng rỗng [] thì của bạn là đúng. Nhưng trong trường hợp giá trị khởi tạo là mảng có phần tử [1,2,3] ... Thêm một số case không tác động tới checkbox nhưng giá trị checked vẫn phải thay đổi => cách làm của bạn bị thiếu nhé.
hóng khóa springboot nâng cao ạ.
Chấmmmmm
Trường hợp có nhiều block check box như kiểu filter by price, filter by category thì mình làm như nào mọi người nhỉ? Phải tạo ra nhiều checked à hay có cách nào viết để dùng chung không ạ?
Mình xem bài này không dưới 5 lần mới thông.
khi save ở vs code thì page ko auto load, có ae nào biết cách fix ko nhỉ
cho mình hỏi là tại sao mình dùng splice như bên dưới thì lại không hoạt động đúng dc nhé:
function handleOnChange(id) {
setChecked((prev) => {
const isChecked = checked.includes(id);
if (isChecked) {
/* return checked.filter((item) => item !== id); */
checked.splice(checked.indexOf(id), 1);
return checked;
} else return [...prev, id];
});
}
Mình có tìm hiểu và thử lại . Bạn dùng splice sẽ đổi cả giá trị checked và pre. Nghĩa là setState bạn truyền lại chính nó(không thay đổi giá trị tương tự setState(pre=> pre) ) nên sẽ không re-render lại khi gọi setState
Cho em hỏi trong hàm handleCheck. Mảng "checked" với mảng "prev" nó giống hay khác nhau vậy anh, tại thấy khúc trên a dùng mảng "checked", khúc cuối push id vào a dùng mảng "prev"
À ở đây nó giống nhau thôi, anh copy lên nên nhầm trên lại dùng checked, em xem bài trước để hiểu là nó giống nhau nha em
A sơn bao giờ a làm một khóa Angular đi ạ
cho e hỏi ở 26:54 dòng 35 và 37, sao mình ko thay biến checked thành biến prev nhỉ
A ko để ý thôi, em dùng prev cho đồng nhất nhé. Còn 2 biến đều lưu cùng 1 địa chỉ vùng nhớ thôi
@@F8VNOfficial e cảm ơn thầy Sơn nhiều, e đi làm gần 1 năm, main React sáng tới tối nhưng khi xem thầy dạy thì đều học được cái mới 😁😁
tại sao lúc filter return luôn cái state mà không setState lại nhưng nó vẫn nhận được vậy anh ơi.
vì hàm filter nó lặp cái mảng đang có bao nhiêu phần tử đang đc check xong nó filter thằng nào có id khác id trong mảng và nó trả về mảng mới gồm các phần tử trừ thằng id kia ra => setState lúc này là mảng có 2 nên show ra đc 2
làm form mà seState như vậy thì sẻ bị re-render rất nhiều, sẻ ko tốt cho per, anh ra bài hướng dẫn xử lý re-render ạ.
Em hiểu nhầm rồi đó, ai bảo em là re-render là không tốt cho performance? Re-render là việc cần thiết để update được trạng thái ứng dụng ra UI. Chỉ có việc re-render không kiểm soát và re-render không cần thiết mới ảnh hưởng tới performance. Giải quyết bằng cách chia component hợp lý và sử dụng các hooks như useMemo, useCallback và React.memo để giải quyết. Em không nên nghĩ render lại nhiều là ảnh hưởng, mà render lại thừa mới ảnh hưởng. Trong tình huống này ko có vấn đề gì về perfomance em nhé. Sau anh ra video về performance sau nha em.
@@F8VNOfficial Cảm ơn trả lời của anh, em hiểu ra vân đề ở đâu rồi. Chúc anh nhiều sức khỏe!
phút thứ 21:25 tại sao không thể lấy được id từ vị trí handleCheck vậy anh, và tại sao lại dùng 1 hàm cha để gọi lại hàm HandleCheck mà ko truyền thẳng hàm handleCheck vào vậy ạ
handleCheck là cái function, out of scope nên k thấy lấy đc cái id, nên phải truyền param vào để xử lý.
2. Để dễ maintain, xử lý, clean code hơn :)))
vì chỉ có thể lấy được id khi đoạn code nằm bên trong cái method MAP thôi bạn
mọi người ơi cho em hỏi tại sao ở chỗ onChange lại phải thêm 1 function cha bên ngoài handleCheck ạ
vì mặc định tất cả event handler như là onclick, onchange, onblur, etc... trong JS sẽ được pass 1 argument là DOM object nên nếu giờ muốn pass 1 custom argurment vào event handler đó thì phải wrap nó vào 1 function thì mới có thể pass được.
VD: Foo thì khi gọi hàm foo() ở ngoài thì nó sẽ là ntn:
foo = (event) => console.log(event) //event đây chính là argument mặc định tự động được pass vào mỗi khi sự kiện click được xảy ra.
Giờ nếu muốn pass 1 custom argument thì phải wrap nó vào 1 function cha:
foo(name)}>Foo
foo = (name) => console.log(name) //lúc này thì name (là 1 custom argument) mới có thể được pass vào hàm foo().
@@free2idol1 mình cảm ơn ạ
a có thể ví dụ trong trường hợp select all và deselect all được không ạ? 😂
Select all thì push hết cái list vào, deselect all thì set lại empty thôi mà 😅
Có bạn nào hiểu tại sao có cái tham số prev trong chỗ callback setChecked không mọi người. Cái prev đó ở đâu ra, khai báo ở đâu mà dùng vậy nhỉ mọi người?
Thanks!
Prev đó chính là cái state khởi tạo ban đầu, tham số đó bạn đặt tên gì cũng đc.
@@khanhbt14 Mình vẫn chưa hiểu ở chỗ là tải sao đặt cái chữ 'prev' hoặc 1 tên khác vào trong setState() là nó mặc định trở thành thằng state trước đó? Ví dụ để setChecked(checked => [...checked, id]) thì mình còn hiểu, còn để prev mình chưa thể nào hiểu được.
[checked, setChecked] = useState() . Thì cái tham số prev đó tương ứng với biến checked . hiểu nôm na thì prev = checked .
Bạn miss bài trước hả? Với cả tên tham số đặt đúng quy ước đặt tên biến là được chứ prev hay checked trong ngữ cảnh này khác gì nhau đâu. Prev là trước đó, prevState của setChecked thì nó là giá trị trước đó của checked sau khi set state
@@F8VNOfficial dạ em hiểu rồi ấy ah, cảm ơn anh nhiều nhé
làm sao để lấy value của input này gắn sang input kia anh
ví dụ em có 2 input
khi em nhập 1 cái input, thì cái còn lại tự nhận value của cái kia
Khi change input 1 thì em set data vào state, dùng state truyền cho prop value của input 2 em nhé
Angular JS hình như là 2 chiều Binding đúng không anh
e thử xử lý khác a Sơn 1 tí đoạn nếu check vào phần tử đã chọn thì sẽ xóa phần tử đó ra khỏi mảng checked, lúc e console.log(checked) thì nó vẫn hiện ra mảng đã xóa phần tử check lần thứ 2, nhưng render ra HTML lại sai, và nếu check vào 1 checkbox bất kì thì nó lại hiện ra phần tử đã xóa trước đó, ai giải thích dùm e với
Đây là hàm xử lý
const handleChecked = (id) => {
setChecked(prev => {
const isChecked = prev.includes(id)
if (isChecked) {
// return prev.filter(item => item !== id) //đoạn này của anh Sơn thì return ra 1 mảng mới và gán mảng đó vào checked
prev.splice(prev.indexOf(id), 1) // đoạn này e thử xóa phần tử có trong mảng
return prev //sau đó return về mảng đã xóa phần tử
} else {
return [...prev, id]
}
})
}
Đoạn này mình nghĩ do bị bất đồng bộ của thằng setState. bạn dùng pre.splice nó đã thay đổi luôn giá trị cảu checked r. Sau setState lại dùng tiếp cái giá trị đã thay đổi đấy.(mình nghĩ thế ko chắc lắm nhé :v). Vẫn cần chuyên gia vào confirm
Mình có tìm hiểu và thử lại r. Bạn dùng splice sẽ đổi cả giá trị checked và pre. Nghĩa là setState bạn truyền lại chính nó(không thay đổi giá trị tương tự setState(pre=> pre) ) nên sẽ không re-render lại khi gọi setState
bạn return [...prev] thử xem nhé!
@@toannq98 cái này là tạo 1 mảng mới. Tham trị và tham chiếu ý bạn. Spread dĩ nhiên so sánh sẽ ra 2 mảng khác nhau r
Có ai như em không em thêm props value vào input thì không gõ được nữa.
Ko gõ được vì em chưa set lại state khi onChange đó
Anh sơn ơi tại sao phần checkbox khi em nhấn chọn 2 lần thì nó báo lỗi là Cannot read properties of undefined (reading 'includes') vậy anh
bug này là do cái đối tượng đang gọi đến includes là undefined
vue thì cứ v-model là xong, reactjs lằng nhằng vậy :))))
vue nó extends điểm mạnh của angular + react mà ông
Mk vào trang f8 fullstack nhưng không vào học được. Có lỗi không đăng nhập được. Không biết vấn đề này có xảy ra với các bạn khác không
Bạn đăng nhập qua phương thức nào bạn ơi?
@ficial mk dùng email trc của mình để đăng nhập thì bị báo là "Mỗi người nên sử dụng riêng một tài khoản, tài khoản nhiều người sử dụng chung có thể sẽ bị khóa" nhg mk dùng có 1 mk à. Rồi mk đăng kí bằng cả số điện thoại lẫn email khác thì đều load rất lâu và ko vào được. Mình có console thì báo lỗi failed to load resource vs cả access to xmlhttpRequest bị block bởi CORS policy
Chủ tịch nói sai chỗ nào thì nói lại chỗ đó thôi, hoặc cắt video khúc đó nói lại thôi chứ nói lại từ đầu mất công lắm
Oki thank em nhé
setChecked((prev) => {
const isChecked = checkedd.includes(id);
if (isChecked) {
//unchecked
} else {
return [...prev, id];
}
});
anh ơi, cho em hỏi trong hàm setChecked(...), đoạn if(isChecked){....} else{ return [...prev, id];}
em ko hiểu logic phần này, tại sao điều kiện nếu checked thì là unchecked, ngược lại thì trả về mảng chỉ bao gồm các giá trị id từ 1-3.
ý nghĩa của biểu thức điều kiện ở đây là gì ạ? có ai có thể giải thích giúp em với ạ. em cảm ơn rất nhiều
Là như này nhá, vì là checkbox nên có vụ check lại lần nữa thì uncheck nó đi.
isChecked=checked.includes(id)
//chổ này đặt cờ kiểm tra nếu list checked có chưa id đó thì return true
//if kiểm tra cờ true thì thực hiện uncheck, bình thường thì nhiều người sẽ slice cái id đó ra khỏi list. Mà có cách nhanh khác nữa là filter cái list lấy ra những thằng có id khác thằng id ở param
checked.filter(itemId=>itemId !== id)
//chổ này nó sẽ return về cái list mới không chứa cái id đc truyền
//nếu cờ isChecked = false
Thì thực hiện push cái id đó vào list, nhưng mà làm gọn thì clone lại list checked rồi thêm id vào. Vì viết đúng concept react nên có prevState chứ mấy người lười thì họ return setChecked([...checked,id])
@@trungphanphuoc1426 em cảm ơn anh nhiều ạ, giờ em hiểu rùi ạ chỗ này cần sửa là: nếu đặt cờ kiểm tra list checked chưa có id thì return false
đúng ko anh?
cờ là true: nếu như list checked chứa id trùng khi check
chỗ map sau => sao lại là dấu () vậy ạ, em dùng {} sai phải ngồi nhìn mãi :v
Bạn xem lại Arrow Function sẽ hiểu nha. { } khi bên trong viết logic hàm callback. Còn ( ) khi bên trong chỉ viết giá trị trả về của hàm callback đó thôi. Nếu logic ko có gì quá phức tạp thì sẽ viết thẳng giá trị trả về như vậy luôn.
Lỗi
Uncaught (in promise ) SyntaxError: "undefined" is not valid JSON
at JSON.parse ()
at content_bundle.js:1:974975
Là bị gì vậy ạ . Cứ npm start là xem trên console trình duyệt xuất hiện và cho em giải pháp biến mất 😂
b fix dc chua chỉ mình vs
@@KunzHorus do trình duyệt khác chrome mới bị. Mình dùng côccoc
@@quyenly405 oki b
like🥰🥰🥰🥰🥰🥰
Chỗ checked ={ !checked.includes(course.id) } ok ?
Good job