อันนี้เป็นโน้ตจากการที่ผมพยายามทำแชทให้แอดมินใช้ตอบลูกค้าครับ ที่อยากได้คือลิสรายชื่อที่เวลาเราเลื่อนลงมาลงสุดแล้วให้มันโหลดรายชื่อเพิ่มเหมือนของ Facebook นั่นแหละ ผมก็เลยค้นหาและลองจนใช้งานได้แล้วก็เอามาแปะไว้ในนี้ด้วย กันลืม เวลาจะใช้ครั้งต่อไปจะได้หาง่ายๆ
อันนี้ผมเขียนแยกเป็น Child Component แยกไว้ต่างหาก ที่มันรับ props มาจาก Parent Component อีกทีเพื่อมา render รายการที่เราต้องการอีกที โดยตัว div หรือ li ที่เราต้องการจัดการเป็นแบบนี้
<div onScroll={handleScroll}>รายการอยู่ในนี้<div>
ตัวฟังก์ชั่นเป็นแบบนี้
const handleScroll = (e) => {
let bottom = e.target.scrollHeight - Math.ceil(Math.abs(e.target.scrollTop)) === e.target.clientHeight;
if (bottom) {
console.log('reach bottom');
setPosition(position+20);
props.updateLastCustomer(position);
console.log('position is ', props.lastCustomer);
}
}