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

Nội dung chính

1. Viết hàm Toggle Form
2. Viết hàm Render Level Item
3. Viết hàm cho input onChange
4. Viết hàm cho select - option onChange
5. Viết hàm cho nút Cancel
6. Viết hàm cho nút Submit

1. Viết hàm Toggle Form

Ban đầu khi mới vào trang web thì phần Form để thêm sản phẩm chưa xuất hiện. Khi người dùng click vào Add Item mới hiện ra.

Trong file App.js ta khai báo một biến state kiểu boolean để lưu việc ẩn hiện Form, giá trị mặc định của nó là false


constructor(props) {    
    super(props);
    this.state = {
        ...
        showForm: false
    }
}

Kéo xuống bên trong hàm render, giờ ta gửi state này cho Component Form để xử lí.


<Form 
    showForm={this.state.showForm}
/>

Trong file Form.js bên trong hàm render của nó, ta chỉ việc check giá trị props được gửi sang. Nếu giá trị này khác false mới render phần HTML.


render() {
    if (this.props.showForm === false) return null;
    return(
        <form className="form-inline">
            ...
        </form>
    )
}

Quay lại file App.js ta viết một hàm Toggle Form đảo ngược giá trị như sau.


handleShowForm = () => {
    this.setState({
        showForm: !this.state.showForm
    });
}

Kéo xuống bên trong hàm render, ta gắn sự kiện onClick và gọi đến hàm khai báo ở trên, đồng thời ta thay đổi chữ cho phù hợp với trạng thái Add Item - Close Item.


<button 
    type="button" className="btn btn-info btn-block marginB10"
    onClick={this.handleShowForm}
>
    { (this.state.showForm) ? 'Close Item' : 'Add Item' }
</button>

2. Viết hàm Render Level Item

Khi Form được hiện ra chúng ta có đoạn select - option liệt kê các level của sản phẩm nhưng thực ra đoạn đó chỉ là HTML có sẵn.
Trong file App.js chúng ta đã tạo được một mảng arrayLevel chứa giá trị number level, giờ ta gửi nó sang cho Component Form để xử lí.


<Form 
    showForm={this.state.showForm}
    arrayLevel={this.state.arrayLevel}
/>

Trong file Form.js ta viết một hàm nhận props arrayLevel trên, duyệt mảng và in ra thẻ option tương ứng.


renderLevel = () => {
    let {arrayLevel} = this.props;
    return arrayLevel.map((level,index)=>{
        switch (level) {
            case 0:
                return <option key={index} value={level}>Small</option>
            case 1:
                return <option key={index} value={level}>Medium</option>
            default:
                return <option key={index} value={level}>High</option>
        }
    });
}

Việc tiếp theo là xóa các thẻ HTML option bên dưới và thay bằng hàm trên.


<select className="form-control">
    {this.renderLevel()}
</select>

3. Viết hàm cho input onChange

Theo phong cách quản lí tập trung tất cả các state đều để trong App.js ta cũng sẽ tạo một state kiểu string để lưu tên sản phẩm muốn add, sau đó cũng gửi sang Component Form.


constructor(props) {    
    super(props);
    this.state = {
        ...
        valueItem: ''
    }
}
.....
<Form 
    showForm={this.state.showForm}
    arrayLevel={this.state.arrayLevel}
    valueItem={this.state.valueItem}
/>

Trong file Form.js ta gắn value của input bằng props được nhận.


<input 
    type="text" className="form-control" placeholder="Item Name" 
    value={this.props.valueItem} 
/>

Cái còn thiếu là việc onChange thay đổi giá trị value của input, tất cả việc thay đổi đều gom vào trong file App.js còn sự kiện onChange chỉ gọi đến hàm đấy là xong.
Trong file App.js ta viết một hàm thay đổi giá trị valueItem nhận một tham số value đầu vào, sau đó gửi hàm này cho Component Form


handleFormInputChange = (value) => {
    this.setState({
        valueItem: value
    });
}
...
<Form 
    ...
    handleFormInputChange={this.handleFormInputChange}
/>

Trong file Form.js ta viết sự kiện onChange gọi đến props handleFormInputChange và truyền tham số value.


<input 
    type="text" className="form-control" placeholder="Item Name" 
    value={this.props.valueItem} 
    onChange={(event)=>this.props.handleFormInputChange(event.target.value)}
/>

4. Viết hàm cho select - option onChange

Cũng làm tương tự như bước 3 ở trên, trong App.js ta tạo một state kiểu number lưu giá trị levelItem, mặc định bằng 0, sau đó gửi state này cho Componenet Form.


constructor(props) {    
    super(props);
    this.state = {
        ...
        valueItem: '',
        levelItem: 0
    }
}
...
<Form 
    ...
    levelItem={this.state.levelItem}
/>

Trong file Form.js ta gắn value của select bằng props được nhận.


<select 
    className="form-control"
    value={this.props.levelItem}
>
    {this.renderLevel()}
</select>

Quay lại file App.js ta viết một hàm thay đổi giá trị levelItem nhận một tham số value đầu vào, sau đó gửi hàm này cho Component Form.


handleFormSelectChange = (value) => {
    this.setState({
        levelItem: value
    });
}
...
<Form 
    ...
    levelItem={this.state.levelItem}
    handleFormSelectChange={this.handleFormSelectChange}
/>

Trong file Form.js ta viết sự kiện onChange gọi đến props handleFormSelectChange và truyền tham số value.


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

5. Viết hàm cho nút Cancel

Ở đây tác vụ mình làm với nút Cancel là reset các giá trị tên - level sản phẩm về mặc định, còn không thì các bạn có thể làm theo ý khác.

Trong file App.js ta viết hàm reset giá trị vể mặc định, sau đó gửi hàm này cho Component Form


handleFormClickCancel = () => {
    this.setState({
        valueItem: '',
        levelItem: 0
    });
}
...
<Form 
    ...
    handleFormClickCancel={this.handleFormClickCancel}
/>

Trong file Form.js ta gắn sự kiện onClick cho nút Cancel và gọi đến props trên là xong.


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

6. Viết hàm cho nút Submit

Trong file App.js ta viết sẵn một hàm cho sự kiện click Submit và gửi qua Component Form.


handleFormClickSubmit = () => {

}
...
<Form 
    ...
    handleFormClickSubmit={this.handleFormClickSubmit}
/>

Trong file Form.js ta gắn sự kiện onClick cho nút Submit và gọi đến props trên là xong.


<button 
    type="button" className="btn btn-primary"
    onClick={()=>this.props.handleFormClickSubmit()}
>
    Submit
</button>

Một lưu ý nữa là khi người dùng nhập tên sản phẩm xong rất hay bấm Enter để thay cho việc kéo chuột nhấn nút Submit, vậy ta cũng cho sự kiện onSubmit vào thẻ HTML form gọi đến props trên.


<form className="form-inline" onSubmit={()=>this.props.handleFormClickSubmit()}>
    ...
</form>

Quay lại hàm handleFormClickSubmit giờ là lúc xử lí code bên trong. Luồng xử lí của mình như sau.

Lấy giá trị tên sản phẩm, level sản phẩm muốn add
Kiểm tra nếu tên sp rỗng thì không add
Nếu khác rỗng thì tạo đối tượng sp mới
Gán các giá trị vào đối tượng
Thêm package uuid để gán id cho sp
Thêm đối tượng sp mới đó vào mảng sp ban đầu
Cập nhật lại state các sp
Thêm sp mới xong thì đóng Form, reset các giá trị về ban đầu

Trong file App.js các bạn lưu ý là nhớ import thêm uuid. Code toàn bộ phần này như sau.


import uuidv4 from 'uuid/v4';
...
handleFormClickSubmit = () => {
    let {valueItem,levelItem} = this.state;
    if(valueItem.trim() === 0) return false;
    let newItem = {
        id: uuidv4(),
        name: valueItem,
        level: +levelItem
    }; 
    Items.push(newItem);
    this.setState({
        items: Items,
        valueItem: '',
        levelItem: 0,
        showForm: false
    });
}

Các bước trên mình cũng chỉ làm ở mức đơn giản, nếu kĩ lưỡng các bạn có thể chia thêm trường hợp tên sp rỗng thì hiện lên thông báo SweeetAlert, khi đã khác rỗng còn có thể check thêm tên này có bị trùng với tên sp có sẵn hay không, thỏa mãn các điều kiện rồi mới thêm mới sp mới đó vào.

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