دورة react js للمبتدئين الدرس التاسع

منذ 5 سنوات imadbelasri Reactjs
RS

فهاد الدرس التاسع من دورة react js للمبتدئين غادي نكملو الدورة ديالنا فهاد الدرس غادي يكون تتمة للدرس السابق غادي نديرو تغييرات على ل fonction onInputChange باش ندير البحث فل array data ونعرض الأخبار على حسب القيمة ديال البحث.


1- إضافة array filtred ف state

ف state بجانب ل array data غادي نزيد array filtred خاوية فيها غادي يكونوا المعلومات لي كتطابق البحث.

الكود لي زدنا ف state هو :

                                                    
                                                        //
    state = {
        data : [
            {
                'title': 'lorem ipsum',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'vitae dictum turpis lacinia',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'consectetur adipiscing',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'Duis fringilla risus elit',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            }
        ],
        filtred : []
    };
                                                    
                                                

2- إضافة تغيير على ل fonction onInputChange

فل fonction onInputChange كندير تغيير فكنخزن القيمة لي دخلنا فالحقل ديال البحث ف variable search منبعد كنخدم بل méthode filter لي شفنا فالمقدمة ديال الدورة لي كنبحث بها على title لي كيساوي القيمة ديال البحث.

منبعد النتيجة كنزيدها فل filter array لي زدنا وباستخدام setState لي هي ل méthode لي كتمكنا باش نغيروا القيم لي عندنا ف state.

فالكود لي زدنا فل fonction onInputChange هو :


                                                        
                                                            //
  onInputChange = (event)=>{
        let search = event.target.value;
        const filtred = this.state.data.filter((item)=>{
            return item.title.indexOf(search) > -1;
        });
        this.setState({
            filtred 
        });
    }
                                                        
                                                    

3- عرض الأخبار باستعمال ل filter

فباش نعرض الأخبار بل filter لي زدنا غادي ندير تغيير على data لي كنرسل ل news فغادي نتحقق يلا كانت ل filter خاوية غادي نرسل ل array data ويلا كان العكس فكنرسل ل array filter.

فيلا مشيتي للمتصفح ودخلتي lore فالحقل غادي تحصل على النتيجة:






الكود ديال index.js كامل هو :

                                                        
                                                            //
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';

class  App extends Component {
    state = {
        data : [
            {
                'title': 'lorem ipsum',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'vitae dictum turpis lacinia',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'consectetur adipiscing',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'Duis fringilla risus elit',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            }
        ],
        filtred : []
    };
    onInputChange = (event)=>{
        let search = event.target.value;
        const filtred = this.state.data.filter((item)=>{
            return item.title.indexOf(search) > -1;
        });
        this.setState({
            filtred 
        });
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
            </div>
        )
    }
};

ReactDOM.render(<App/>,document.querySelector('#root'));
                                                        
                                                    

دروس ذات صلة

RS

دورة react js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت...


RS

دورة react js للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les foncti...


RS

دورة react js للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف E...


RS

دورة react js للمبتدئين الدرس الرابع

فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet...


RS

دورة react js للمبتدئين الدرس الخامس

فهاد الدرس الخامس من دورة react js غادي نشوفوا كيفاش نزيدو component آخر ومنبعد غادي نشوفوا كيفاش نع...


RS

دورة react js للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات...


RS

دورة REACT JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو مجموعة ديال الاخبار ف state ومن...


RS

دورة react js للمبتدئين الدرس الثامن

فهاد الدرس الثامن من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو ل filter ل application ديالنا غ...


RS

دورة react js للمبتدئين الدرس التاسع

فهاد الدرس التاسع من دورة react js للمبتدئين غادي نكملو الدورة ديالنا فهاد الدرس غادي يكون تتمة للدر...


RS

دورة react js للمبتدئين الدرس العاشر

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالد...