ReactJS là gì và tạo một ứng dụng Todolist đơn giản với ReactJs ( Phần 2 )
Bài đăng này đã không được cập nhật trong 5 năm
Xin chào các bạn, tiếp tục với phần 1 là ReactJS là gì và tạo một ứng dụng Todolist đơn giản với ReactJs ( Phần 1 ), chúng ta đã tìm hiểu được ReactJS là gì, cùng với đó là thao tác cơ bản với một số hàm thì ở phần này mình sẽ tiếp tục làm nốt 2 nội dung còn lại là Edit và Delete 1 Task nhé.
Đầu tiên, chúng ta sẽ tạo view cho Edit và Delete trước nhé:
Trong file src//TodoList.js các bạn thêm đoạn code view vào như sau:
<td>
<button type="button" className="btn btn-outline-primary" onClick={this.handleEdit}><i className="far fa-edit"></i>Edit</button>
</td>
<td>
<button type="button" className="btn btn-outline-primary" onClick={this.handleDelete}><i className="fa fa-trash"></i>Delete</button>
</td>
Với 2 sự kiện là onClick handleEdit và handleDelete dùng để xử lý các thao tác khi người dùng click vào button.
Tiếp theo, chúng ta sẽ tạo ra 2 method dùng để xử lý việc edit và delete
handleEdit = () => {
this.props.openEditForm()
this.props.editTask(this.props.name, this.props.getIndexTask)
}
handleDelete = () => {
this.props.deleteTask(this.props.name)
}
Sau khi hoàn chỉnh, file TodoList.js chúng ta sẽ như thế này:
import React, { Component } from 'react';
class TodoList extends Component {
handleEdit = () => {
this.props.openEditForm()
this.props.editTask(this.props.name, this.props.getIndexTask)
}
handleDelete = () => {
this.props.deleteTask(this.props.name)
}
render() {
return <tr>
<td>{this.props.name}</td>
<td>
<button type="button" className="btn btn-outline-primary" onClick={this.handleEdit}><i className="far fa-edit"></i>Edit</button>
</td>
<td>
<button type="button" className="btn btn-outline-primary" onClick={this.handleDelete}><i className="fa fa-trash"></i>Delete</button>
</td>
</tr>
}
}
export default TodoList;
Giao diện chúng ta sẽ nhận được như sau:
Edit task
Để edit 1 task, chúng ta sẽ tạo thêm 1 Component để xử lý. Mình sẽ tạo ra 1 file là src/EditTask.js với đoạn code như sau:
import React, { Component } from 'react';
class EditTask extends Component {
constructor(props) {
super(props)
this.state = {
editItem: this.props.editItem
}
}
handleEditTask = () => {
this.props.doEdit(this.state.editItem.id, this.state.editItem.name)
this.props.closeForm()
}
changedName = (e) => {
this.setState({
editItem: { id: this.props.editItem.id, name: e.target.value }
})
}
render() {
return (
<React.Fragment>
<div className="container">
<h2>Edit task</h2>
<div className="form-group">
<label>Name of task</label>
<input type="text"
className="form-control"
placeholder="Enter name of task"
defaultValue={this.state.editItem.name}
onChange={this.changedName} />
</div>
import React, { Component } from 'react';
import TodoList from './TodoList';
import AddTask from './AddTask';
import EditTask from './EditTask';
class TaskList extends Component {
constructor(props) {
super(props)
this.state = {
tasks: ['Task 1', 'Task 2'],
showAddForm: false,
showEditForm: false,
editTask: { id: -1, name: '' }
}
}
setStatus = () => {
this.setState({
showAddForm: true,
showEditForm: false,
})
}
closeForm = () => {
this.setState({
showAddForm: false,
showEditForm: false,
})
}
addTask = (name) => {
this.state.tasks.push(name)
this.forceUpdate()
}
openEditForm = () => {
this.setState({
showEditForm: true
})
}
editTask = (name, index) => {
this.setState({ editTask: { id: index, name: name } })
}
doEdit = (id, name) => {
this.state.tasks[id] = name
this.forceUpdate()
}
render() {
if (this.state.showAddForm === true) {
return (
<AddTask addTask={this.addTask} closeForm={this.closeForm} />
)
} else if (this.state.showEditForm === true) {
return (
<EditTask doEdit={this.doEdit} closeForm={this.closeForm} editItem={this.state.editTask} />
)
} else {
return (
<div className="container">
<br />
<br />
<button type="button" className="btn btn-outline-primary" onClick={this.setStatus} >Add Task</button>
<h2>List Task</h2>
<table className="table table-striped">
<thead>
<tr>
<th>Name of task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{
this.state.tasks.map(function (name, index) {
return <TodoList name={name}
openEditForm={this.openEditForm}
getIndexTask={index}
editTask={this.editTask}
/>
}.bind(this))
}
</tbody>
</table>
</div>
);
}
}
}
export default TaskList;
<button type="submit" style={{ marginRight: 5 + 'px' }} className="btn btn-default" onClick={this.handleEditTask}>Edit</button>
<button type="button" className="btn btn-default" onClick={this.props.closeForm}>Back</button>
</div>
</React.Fragment>
);
}
}
export default EditTask;
Ở trong file src/TaskList.js chúng ta bổ sung code Edit như sau:
import React, { Component } from 'react';
import TodoList from './TodoList';
import AddTask from './AddTask';
import EditTask from './EditTask';
class TaskList extends Component {
constructor(props) {
super(props)
this.state = {
tasks: ['Task 1', 'Task 2'],
showAddForm: false,
showEditForm: false,
editTask: { id: -1, name: '' }
}
}
setStatus = () => {
this.setState({
showAddForm: true,
showEditForm: false,
})
}
closeForm = () => {
this.setState({
showAddForm: false,
showEditForm: false,
})
}
addTask = (name) => {
this.state.tasks.push(name)
this.forceUpdate()
}
openEditForm = () => {
this.setState({
showEditForm: true
})
}
editTask = (name, index) => {
this.setState({ editTask: { id: index, name: name } })
}
doEdit = (id, name) => {
this.state.tasks[id] = name
this.forceUpdate()
}
render() {
if (this.state.showAddForm === true) {
return (
<AddTask addTask={this.addTask} closeForm={this.closeForm} />
)
} else if (this.state.showEditForm === true) {
return (
<EditTask doEdit={this.doEdit} closeForm={this.closeForm} editItem={this.state.editTask} />
)
} else {
return (
<div className="container">
<br />
<br />
<button type="button" className="btn btn-outline-primary" onClick={this.setStatus} >Add Task</button>
<h2>List Task</h2>
<table className="table table-striped">
<thead>
<tr>
<th>Name of task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{
this.state.tasks.map(function (name, index) {
return <TodoList name={name}
openEditForm={this.openEditForm}
getIndexTask={index}
editTask={this.editTask}
/>
}.bind(this))
}
</tbody>
</table>
</div>
);
}
}
}
export default TaskList;
Mình sẽ giải thích một chút xíu về code bổ sung:
Việc đầu tiên là chúng ta phải import component EditTask để sử dụng chúng đúng không nào 
import EditTask from './EditTask';
Tiếp đến chúng ta sẽ tạo 1 state showEditForm dùng để thay đổi trang thái khi người dùng thực hiện thao tác đóng mở form thông qua function closeForm và openEditForm
Kết quả đạt được như sau:
Delete task
Với phần Delete 1 task thì chúng ta chỉ cần xử lý rất nhanh gọn như sau:
Tạo một function là deleteTask trong src/TaskList.js
deleteTask = (name) => {
const filteredTask = this.state.tasks.filter(task => {
return task !== name
})
this.setState({
tasks: filteredTask
})
}
Tiếp theo chúng ta gửi props qua src/TodoList.js
<tbody>
{
this.state.tasks.map(function (name, index) {
return <TodoList name={name}
openEditForm={this.openEditForm}
getIndexTask={index}
editTask={this.editTask}
deleteTask={this.deleteTask}
/>
}.bind(this))
}
</tbody>
Trong Todolist.js chúng ta đã có sẵn hàm mà lúc đầu bài viết mình có đề cập đến:
handleDelete = () => {
this.props.deleteTask(this.props.name)
}
Và đây là kết quả ta đạt được:
Vậy là chúng ta đã thoàn thành xong các thao tác cơ bản của CURD TodoList, hẹn gặp lại các bạn ở các Series tiếp theo. Vì mình mới học ReactJs nên bài viết không tránh khỏi những sai sót, vì vậy nếu có bất cứ thắc mắc hay yêu cầu gì thì các bạn hãy comment phía dưới mình sẽ giải đáp ạ.
All rights reserved
