ReactJS cơ bản qua ví dụ thực tế - B8 Sort Item

Nội dung chính

1. Xác định các kiểu sắp xếp
2. Viết hàm thay đổi kiểu sắp xếp

1. Xác định các kiểu sắp xếp

Sau khi nghiên cứu tỉ mỉ ta có thể chia việc sắp xếp dựa trên 2 trường dữ liệu.

Kiểu sortType cho chúng ta biết sắp xếp theo kiểu name hay level.

Kiểu sortOrder cho chúng ta biết sắp xếp theo thứ tự lên hay xuống.

Trong file App.js ta tạo ra 2 state kiểu string để lưu giá trị sắp xếp.


constructor(props) {
    super(props);
    this.state = {
        ..
        sortType: '',
        sortOrder: ''
    };
}

Kéo xuống phần render ta gửi 2 state này cho Component Sort.


<Sort 
    sortType={this.state.sortType}
    sortOrder={this.state.sortOrder}
/>

Trong file Sort.js ta thấy việc hiển thị kiểu sắp xếp đang là HTML tĩnh. Giờ ta sẽ viết một hàm chịu trách nhiệm render HTML này và gọi hàm trong phần render.


renderSort = () => {
    
}

render() {
    return (
        <div className="dropdown">
            ...
            {this.renderSort()}
        </div>
    )
}

Trong hàm renderSort đầu tiên ta phải lấy 2 props nhận được, check 2 giá trị này khác rỗng thì ta render ra HTML tương ứng.


renderSort = () => {
    let {sortType, sortOrder} = this.props;
    if(sortType !== '' && sortOrder !== '') {
        return (
            <span className="label label-success label-medium text-uppercase">
                {sortType} - {sortOrder}
            </span>
        )
    }
}

2. Viết hàm thay đổi kiểu sắp xếp

Trong file App.js ta viết một hàm để thay đổi các giá trị sortType và sortOrder. Gửi tiếp hàm này cho Component Sort.


handleSort = (sortType,sortOrder) => {
    console.log(sortType + " - " + sortOrder);
}
<Sort 
    ...
    handleSort={this.handleSort}
/>

Trong file Sort.js ta viết một hàm handleClick với 2 tham số đầu vào. Truyền 2 giá trị này sang cho props handleSort


handleClick = (sortType,sortOrder) => {
    this.props.handleSort(sortType,sortOrder);
}

Kéo xuống phần render của Sort.js ta gắn sự kiện click và truyền giá trị thủ công bằng tay cho thẻ tương ứng.


render() {
    return (
        <div className="dropdown">
            ...
            <ul className="dropdown-menu" id="dropdownMenu1">
                <li onClick={() => this.handleClick('name','asc')}>
                    <span role="button" className="text-uppercase">Name ASC</span>
                </li>
                <li onClick={() => this.handleClick('name','desc')}>
                    <span role="button" className="text-uppercase">Name DESC</span>
                </li>
                <li role="separator" className="divider"></li>
                <li onClick={() => this.handleClick('level','asc')}>
                    <span role="button" className="text-uppercase">Level ASC</span>
                </li>
                <li onClick={() => this.handleClick('level','desc')}>
                    <span role="button" className="text-uppercase">Level DESC</span>
                </li>
            </ul>
            ...
        </div>
    )
}

Sau khi click sắp xếp thử nếu chúng ta console ra được các giá trị sortType và sortOrder được là ok rồi.

Việc tiếp theo là xử lí luồng dữ liệu, cách làm sẽ như sau.

Nhận các tham số đầu vào, lấy giá trị đó gắn cho 2 state sortType - sortOrder
Lấy danh sách các sp
Sử dụng hàm để lọc sp theo các tiêu chí
Sắp xếp xong gán lại danh sách ban đầu

Trong file App.js ta có như sau:


handleSort = (sortType,sortOrder) => {
    let {items} = this.state;
    if(sortOrder !== '' && sortType !== '') {
        let value = `${sortType}-${sortOrder}`;
        switch(value) {
            default:
            break;
        case "name-asc":
            items.sort(this.compareValues('name','asc'));
            break;
        case "name-desc":
            items.sort(this.compareValues('name','desc'));
            break;
        case "level-desc":
            items.sort(this.compareValues('level','asc'));
            break;
        case "level-asc":
            items.sort(this.compareValues('level','desc'));
            break;
        }
        this.setState({
            items    : items,
            sortType : sortType,
            sortOrder: sortOrder
      });
    }
}
// hàm cho sắp xếp động
compareValues = (key, order='asc') => {
    return function(a, b) {
        if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
            return 0;   
        }
        const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key];
        const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key];
        let comparison = 0;
        if (varA > varB) {
            comparison = 1;
        } else if (varA < varB) {
            comparison = -1;
        }
        return (
            (order == 'desc') ? (comparison * -1) : comparison
        );
    };
}

Danh sách bài học về ReactJS