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

Nội dung chính

• 1. Viết hàm Search Item
• 2. Viết hàm cho nút Clear

1. Viết hàm Search Item

Trong file App.js ta tạo một state kiểu string để lưu giá trị Search. Gửi state này cho Component Search.

constructor(props) {
    super(props);
    this.state = {
        ...
        valueSearch: ''
    };
}
...
<Search 
    valueSearch={this.state.valueSearch}
/>

Trong file Search.js ta gắn giá trị value cho thẻ input bằng props nhận được.

<input 
    type="text" className="form-control" placeholder="Search item" 
    value={this.props.valueSearch}
/>

Giờ input chỉ còn thiếu sự kiện onChange, trong file App.js ta viết hàm handleSearch với 1 tham số đầu vào để Search, sau đó gửi hàm này cho Component Search.

handleSearch = (search) => {
    console.log(search);
}
...
<Search 
    valueSearch={this.state.valueSearch}
    handleSearch={this.handleSearch}
/>

Trong file Search.js ta gắn sự kiện onChange gọi đến props handleSearch ở trên.

<input 
    type="text" className="form-control" placeholder="Search item" 
    value={this.props.valueSearch}
    onChange={(event)=>this.props.handleSearch(event.target.value)}
/>

Quay lại file App.js ta xử lí luồng bên trong hàm handleSearch. Cách xử lí như sau:

• Tạo một mảng mới
• Kiểm tra nếu độ dài chuỗi Search bằng 0 thì gán mảng này bằng mảng các sp ban đầu
• Nếu độ dài chuỗi Search lớn hơn 0 mới tìm kiếm
• Chuyển chuỗi Search này về dạng chữ viết thường lowercase
• Duyệt mảng các sp ban đầu
• Kiểm tra tên của mỗi sp dưới dạng lowercase có chứa đoạn chuỗi Search hay không
• Nếu có thì thêm sp đó vào mảng
• Cập nhật lại giá trị của state bằng mảng này

Trong hàm handleSearch chúng ta sử dụng hàm filter của lodash các bạn có thể xem thêm tại https://lodash.com/docs/4.17.5#filter

handleSearch = (search) => {
    let sourceArray = Items;
    let newArray = [];
    if(search.length <= 0) {
        newArray = sourceArray;
    } else {
        search.toLowerCase();
        for(let item of sourceArray) {
            if(item.name.toLowerCase().indexOf(search) > -1) {
                newArray.push(item);
            }
        }
    }
    this.setState({
        items      : newArray,
        valueSearch: search
    });
}

2. Viết hàm cho nút Clear

Tác dụng của nút Clear này đơn giản chỉ là cho chuỗi Search về chuỗi rỗng là xong. Trong file Search.js ta viết sự kiện onClick cho nút Clear như sau.

<button 
    className="btn btn-info" type="button"
    onClick={()=>this.props.handleSearch('')}
>
    Clear
</button>

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

• ReactJS B1 - Tạo giao diện HTML-CSS
• ReactJS B2 - Tạo project và copy giao diện
• ReactJS B3 - Phân chia Component
• ReactJS B4 - Tạo mockdata và render Item
• ReactJS B5 - Delete Item
• ReactJS B6 - Edit Item (P1)
• ReactJS B6 - Edit Item (P2)
• ReactJS B7 - Add Item
• ReactJS B8 - Sort Item
• ReactJS B9 - Search Item

---

Xem Demo online tại: https://quan-li-bai-viet.herokuapp.com/

Xem code tại github: https://github.com/kentrung/project-react-quan-li-bai-viet

Xem code tại Repl: https://github.com/kentrung/project-react-quan-li-bai-viet