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

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

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالدرس السابق.
فغادي نزيدو الإمكانية للمستخدم انه يمسح خبر منبعد ما يضغط على زر خاص بالحذف.


1- إضافة كود الحذف

فل component index.js غادي نزيد fonction سميتها removeItem لي كتاخد ل index ديال ل item لي هو الخبر لي غادي نحذف من بعد ما نضغط على زر الحذف الخاص به.
منبعد كنسترجع ل array data وكنخدم ب spread opérateur لي شفنا قبل باش كنزيد المحتوى ف variable سميتها oldData منبعد كنحذف لخبر بل index ديالو وكنرسل لقيمة ديال oldData ل data.

منبعد كنرسل ل fonction removeItem ل component news 
فالكود لي زدنا ف 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 
        });
    }
    removeItem = (index) => {
        let oldData = [...this.state.data];
        oldData.splice(index, 1);
        this.setState({data: oldData});
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News removeItem={this.removeItem} data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
            </div>
        )
    }
};

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

2- استرجاع ل fonction removeItem

منبعد ف news.js كنسترجع ل fonction removeItem من ل props وكنرسلها ل component news_item.js.

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

                                                        
                                                            //
import React from 'react';
import NewsItem from './news_item';

const News = (props) => {
    
    return(
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>Titre</th>
                    <th>Description</th>
                </tr>
            </thead>
            <NewsItem removeItem={props.removeItem} news={props.data}/>
        </table>
    );
};

export default News;
                                                        
                                                    

3- إضافة زر الحذف

فل component news_item كنزيد الزر ديال الحذف وكنزيدلو ل event onClick يعني ملي نضغط عليه كتنفذ ل fonction removeItem لي كنعطيها ل index ديال ل item لي هو الخبر.

فيلا مشيتي للمتصفح ديالك غادي تلقى النتيجة :



بعد الضغط على الزر الأحمر غادي تحذف لخبر لي بغيتي فالكود لي زدنا ف news_item.js هو :

                                                        
                                                            //
import React from 'react';


const NewsItem = (props) =>{
    const showData = () =>{
        return  props.news.map((item,index)=>{
            return(
                <tr key={index}>
                    <td>{item.title}</td>
                    <td>{item.body}</td>
                    <td><button className="btn btn-sm btn-danger" onClick={()=>props.removeItem(index)}>X</button></td>
                </tr>
            );
        });
    }
    return(
       <tbody>
           {showData()}
       </tbody>
    );              
};

export default NewsItem;
                                                        
                                                    

دروس ذات صلة

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 للمبتدئين غادي نشوفوا كيفاش نستعملوا axios باش نسترجعوا les a...


RS

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

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


RS

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

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