React-window: لا تقم بالتمرير لأعلى عند إعادة التصيير

تم إنشاؤها على ٢ مايو ٢٠١٩  ·  3تعليقات  ·  مصدر: bvaughn/react-window

مرحبا،

أحاول حاليًا تحميل شبكة تحتوي على مربع اختيار إدخال في كل خلية.
كلما نقرت على مربع الاختيار ، أستدعي وظيفة في onChange التي تعين الحالة في المكون الرئيسي.
في كل مرة أنقر فيها على خانة checkbox / setState ، تعيد الشبكة عرضها إلى أعلى الشبكة.
هل هناك أي طريقة للعودة إلى الموضع بالضبط حيث نقرت على مربع الاختيار ، أو بطريقة ما عدم إعادة عرض FixedSizeGrid
أثناء تمرير الدعائم الجديدة أيضًا؟
أعلم أن هناك initialScrollTop ، لكن لا يمكن حساب الموقع السابق الدقيق للمكان الذي حددت فيه خانة الاختيار.

شكرا جزيلا لك على مساعدتك!
(لقد قمت بتضمين مقتطف الشفرة الخاص بي أدناه)

`` `const Cell = ({data، columnIndex، rowIndex، style}) => {

const {list، list2، selectInput} = البيانات ؛

إرجاع (

{list2 [columnIndex + (4 * rowIndex)] &&


className = "w-100"
src = {list2 [columnIndex + (4 * rowIndex)]}
/>

}

) ؛
} ؛

مثال ثابت = () => {
إرجاع (
العمود = {4}
عرض العمود = {190}
الارتفاع = {600}
rowCount = {Math.ceil (trueCoverList.length / 4)}
rowHeight = {250}
العرض = {760}
>
{خلية}

) ؛
}

💬 question

التعليق الأكثر فائدة

آه. أنت تقوم بإنشاء المكونات (الوظائف) داخل طريقة العرض. هذا لا يعمل حقًا لأنه عند إعادة تصيير المكون الخارجي الخاص بك ، سيتم إعادة إنشاء الأنواع الداخلية وسيتم إلغاء تحميل React وإعادة تركيبها.

ستحتاج أيضًا إلى تمرير ولايتك كـ itemData لذلك ستتم إعادة عرض خلايا الشبكة عندما تتغير الحالة.

ها أنت ذا:
https://codesandbox.io/embed/mznznkv0q8

ال 3 كومينتر

هل يمكنك مشاركة نسخة كاملة (في Code Sandbox)؟ ليس لدي الوقت حقًا لإعادة الإنشاء من المقتطفات.

بالتاكيد.

لقد كتبت المثال / السيناريو الأساسي. رجاءا، أخبرني إن كنت تحتاج أي شيء آخر
https://codesandbox.io/embed/mznznkv0q8

شكرا لك

آه. أنت تقوم بإنشاء المكونات (الوظائف) داخل طريقة العرض. هذا لا يعمل حقًا لأنه عند إعادة تصيير المكون الخارجي الخاص بك ، سيتم إعادة إنشاء الأنواع الداخلية وسيتم إلغاء تحميل React وإعادة تركيبها.

ستحتاج أيضًا إلى تمرير ولايتك كـ itemData لذلك ستتم إعادة عرض خلايا الشبكة عندما تتغير الحالة.

ها أنت ذا:
https://codesandbox.io/embed/mznznkv0q8

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات