React trick 4 (how to deal with items in the list)

React trick 4 (how to deal with items in the list)

There are 5 articles in this tutorial, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1.React Tip 1 (Use of Stateful Components and Stateless Components) ----2018.01.04

2.React Tip 2 (Avoid meaningless parent nodes)----2018.01.05

3.React Skill 3 (How to render a List gracefully)----2018.01.06

4.React Skill 4 (How to deal with the Item in List)----2018.01.07

5.React technique 5 (TodoList implementation) ----2018.01.08

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

In the last lesson, we rendered a List. In this lesson, let's delete the Item items in it.

We will explain, add, and delete in the next lesson!

Let’s add a delete button first

<li key={data.id}>{data.title} <button>Delete</button></li>

We beautify the interface by the way, and get familiar with some of the writing of postCss in advance

Modify app -> public -> css -> shop.pcss

.content {
  > li {
    list-style-type: none;
    margin-top: 10px;
  }
  button {
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 10px;
    margin-left: 10px;
  }
}

Look at the browser interface

Next, we add events to the button, bind the function, and pass the id as a parameter, click delete to see if we can get the parameter id

<button onClick={this.handleItemDel.bind(this, data.id)}>Delete</button>
handleItemDel(id) {
    console.log(id);
}

There is also a way of writing, without binding this, directly writing a callback function in it

<button onClick={() => this.handleItemDel(data.id)}>Delete</button>

We click the button to see if we can print out the current id

We clicked on the front-end Renren 5 and printed out its id!

Let's write the delete event below!

handleItemDel(id) {
    let list = this.state.list;
    list.splice(list.findIndex(data => data.id === id), 1);
    this.setState({list: list})
}

Complete code

import React from'react';
import'../../public/css/shop.pcss'

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {id: 1, title:'Front-end Renren 1'},
                {id: 2, title:'Front-end Renren 2'},
                {id: 3, title:'Frontend Renren 3'},
                {id: 4, title:'Frontend Renren 4'},
                {id: 5, title:'Frontend Renren 5'},
                {id: 6, title:'Front-end Renren 6'},
                {id: 7, title:'Frontend Renren 7'},
                {id: 8, title:'Front-end Renren 8'},
                {id: 9, title:'Front end Renren 9'}
            ]
        };
    }

    handleItemDel(id) {
        let list = this.state.list;
        list.splice(list.findIndex(data => data.id === id), 1);
        this.setState({list: list})
    }

    render() {
        let {list} = this.state;
        return (
            <div className="content">
                {
                    list.map(data => <li key={data.id}>{data.title}
                        <button onClick={() => this.handleItemDel(data.id)}>Delete</button>
                    </li>)
                }
            </div>
        );
    }
}

export default Index;

ok!

The browser is running, click to delete the front end Renren 5 Try it

Successfully deleted!

Reference: https://cloud.tencent.com/developer/article/1092761 React Tips 4 (How to deal with items in List)-Cloud + Community-Tencent Cloud