ReactJS cơ bản qua ví dụ thực tế - B6 Edit Item (P2)

Nội dung chính

• 1. Viết sự kiện Cancel sửa sản phẩm
• 2. Viết hàm thay đổi input name
• 3. Viết hàm thay đổi select option level
• 4. Viết sự kiện Save sửa sản phẩm

1. Viết sự kiện Cancel sửa sản phẩm

Khi đang load giao diện sửa sản phẩm, nếu thấy sửa chữa không đúng ý người dùng có thể bấm Cancel để hủy. Có lẽ sự kiện này là đơn giản nhất nên ta làm trước.

Cần phải hiểu rằng việc có load ItemEdit hay không phụ thuộc vào idEdit, ban đầu idEdit là string rỗng, chỉ khi click Edit mới có giá trị. Vậy giờ chỉ cần bấm Cancel ta set cho idEdit về rỗng là xong.

Trong file App.js chúng ta viết một hàm để set giá trị idEdit

handleEditClickCancel = () => {
    this.setState({
        idEdit: ''
    });
}

Sau đó ta gắn hàm này vào Component ItemEdit

<ItemEdit 
    ...
    handleEditClickCancel={this.handleEditClickCancel}
/>

Trong file ItemEdit.js ta viết sự kiện onClick cho nút Cancel, mỗi lần click thì gọi thẳng đến props luôn.

<button 
    type="button" className="btn btn-default btn-sm marginR5"
    onClick={()=>this.props.handleEditClickCancel()}
>
    Cancel
</button>

2. Viết hàm thay đổi input name

Ở bước trên chúng ta đã bấm hủy để không sửa sản phẩm, bước tiếp theo là bấm lưu để lưu sản phẩm sau khi sửa. Vấn đề là chúng ta chưa viết các hàm cho sự thay đổi tên và level, ở đây chính là input và select.

Trong file ItemEdit.js đoạn input ta mới chỉ viết value={this.props.nameEdit} còn giá trị nameEdit nằm ở trong file App.js. Cách xử lí như sau:

• Viết một hàm thay đổi giá trị nameEdit
• Gửi qua cho Component ItemEdit
• Viết sự kiện onChange gọi đến hàm đó

Trong file App.js ta viết một hàm thay đổi giá trị state nameEdit và nhận tham số truyền vào.

handleEditInputChange = (value) => {
    this.setState({
        nameEdit: value
    });
}

Sau đó ta gắn hàm này vào Component ItemEdit

<ItemEdit 
    ...
    handleEditClickCancel={this.handleEditClickCancel}
    handleEditInputChange={this.handleEditInputChange}
/>

Trong file ItemEdit.js ta viết sự kiện onChange cho input, mỗi lần thay đổi thì gọi thẳng đến props luôn.

<input 
    type="text" className="form-control" 
    value={this.props.nameEdit} 
    onChange={(event) => this.props.handleEditInputChange(event.target.value)}
/>

3. Viết hàm thay đổi select option level

Cách làm cũng sẽ tương tự như ở bước trên, tất cả các sự thay đổi giá trị state đều tập trung trong file App.js

Trong file App.js ta viết một hàm thay đổi giá trị state levelEdit và nhận tham số truyền vào.

handleEditSelectChange = (value) => {
    this.setState({
        levelEdit: value
    });
}

Sau đó ta gắn hàm này vào Component ItemEdit

<ItemEdit 
    ...
    handleEditClickCancel={this.handleEditClickCancel}
    handleEditInputChange={this.handleEditInputChange}
    handleEditSelectChange={this.handleEditSelectChange}
/>

Trong file ItemEdit.js ta viết sự kiện onChange cho select, mỗi lần thay đổi thì gọi thẳng đến props luôn.

<select 
    className="form-control"
    value={this.props.levelEdit}
    onChange={(event) => this.props.handleEditSelectChange(event.target.value)} 
>
    {this.renderLevel()}
</select>

4. Viết sự kiện Save sửa sản phẩm

Sau khi làm xong các bước trên ta đã thay đổi được giá trị name và level. Việc tiếp theo là click vào nút Save chúng ta mới sửa lại sản phẩm với giá trị mới này.

• Lấy danh sách sản phẩm, lấy id - tên - level của sản phẩm muốn sửa
• Duyệt danh sách sản phẩm
• So sánh id của mỗi sản phẩm với id sản phẩm muốn sửa
• Thay đổi lại tên và level của sản phẩm đó

Trong file App.js ta viết một hàm để lưu sản phẩm sau khi sửa

handleEditClickSubmit = () => {
    
}

Trong hàm này cần lấy danh sách sản phẩm, id - tên - level của sản phẩm muốn sửa

handleEditClickSubmit = () => {
   let {items,idEdit,nameEdit,levelEdit} = this.state; 
}

Việc tiếp theo là duyệt mảng danh sách sản phẩm ban đầu, trong quá trình duyệt ta so sánh id của mỗi sản phẩm với idEdit, nếu giống thì gán lại giá trị tên và level cho nó.

handleEditClickSubmit = () => {
    let {items,idEdit,nameEdit,levelEdit} = this.state;
    if(items.length > 0) { 
        for(let i = 0; i < items.length; i++) {
            if(items[i].id === idEdit) {
                items[i].name = nameEdit;
                items[i].level = +levelEdit;
                break;
            }
        }
    }
}

Các bạn lưu ý ở trên mình viết thêm dấu cộng trước levelEdit để ép nó sang number. Việc tiếp theo là sau khi sửa sản phẩm với các giá trị mới ta cũng set lại idEdit về lại ban đầu.

handleEditClickSubmit = () => {
    let {items,idEdit,nameEdit,levelEdit} = this.state;
    if(items.length > 0) { 
        ...
    }
    this.setState({
        idEdit: ''
    });
}

Ở đây mình cũng chỉ mới làm ở mức đơn giản còn nếu kĩ lưỡng thì các bạn sẽ phải check giá trị nameEdit, chẳng hạn như không được để tên sản phẩm rỗng hoặc tên sản phẫm đã có rồi.

Việc tiếp theo sau khi viết xong hàm là gửi hàm này qua Component ItemEdit

<ItemEdit 
    ...
    handleEditClickCancel={this.handleEditClickCancel}
    handleEditInputChange={this.handleEditInputChange}
    handleEditSelectChange={this.handleEditSelectChange}
    handleEditClickSubmit={this.handleEditClickSubmit}
/>

Trong file ItemEdit.js ta viết sự kiện onClick cho nút Save thì gọi thẳng đến props luôn.

<button 
    type="button" className="btn btn-success btn-sm"
    onClick={()=>this.props.handleEditClickSubmit()}
>
    Save
</button>

Về phần sửa sản phẩm này khá dài các bạn test thử lại xem đã ngon chưa nhé.

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