Tự học React JS thời đại dịch Corona nCoV – Phần 2

Sử dụng CSS trong React

Trước khi code bất kì dòng JavaScript nào, bạn cần biết cách add styles vào components trong React.

Trong phần 1 chúng ta đã xóa file App.css vì không cần đến chúng. Và sau đây là 2 cách sử dụng CSS trong React: local hoặc global. File CSS ở local được chia theo từng style dựa trên mỗi component. Điều này giúp các app có được nhiều style dựa trên những component đã có.

Tạo component cho app

Đầu tiên, chúng ta hãy thêm dữ liệu vào to-do list ở state

import React, {Component} from 'react';
export default class App extends Component{
  state={
   'todos':[
       {'name':'Walk the dog', 'id': 0},
       {'name':'Bake a cake', 'id': 1},
        {'name':'Study for the test', 'id': 2}
        ]
      }
render(){
  return(
    <div>
     <h1>To-do list app using React </h1>
   </div>
  )
 }
}

Chúng ta vừa thêm dữ liệu vào state, với thuộc tính là name và id. Thuộc tính name thể hiện hành động trong phần to-do list, còn id dùng để phân biệt với nhau.

Trong phần trước chúng ta đang ở phần render cho page. Tiếp theo chúng ta hãy xem sơ đồ để hiểu rõ hơn về cách thức hoạt động của React

Chúng ta không sử dụng component để render mà chỉ sử dụng để duy trì state của to-do list. Chúng ta sẽ sử dụng component todos để xuất tất cả dữ liệu ra trình duyệt

Props trong React

Props là cách mà component có thể nhận được các giá trị của thuộc tính truyền từ bên ngoài vào.

Props là cách mà các component có thể nói chuyện với nhau (trao đổi dữ liệu với nhau) và được truyền từ component chính xuống.

Props là bất biến (nó không thay đổi giá trị trừ khi dữ liệu gốc của nó thay đổi).

Tạo component todos

Đầu tiên chúng ta tạo file todos.js như bên dưới

import React from 'react';
const Todos=({todos})=>{
 const todoItems=[];
 todos.forEach(todo=>{
  todoItems.push(
    <div key={todo.id}>
      <li>{todo.name} <button className="btn btn-delete">X</button>
      </li>
    </div>
  )
});
return(
  <div className="list-container">
    <ul className="list">
     {todoItems}
   </ul>
  </div>
 )
}
export default Todos;

Chúng ta chỉ update phần UI, bên trong hàm Todos() chúng ta lấy giá trị từ App Component. Và tạo ra list todoItems. Trong React, các biến JavaScript có thể được xuất trực tiếp trong JSX bằng cách bỏ chúng vào {}.

Bây giờ, tất cả những gì chúng ta phải làm là import vào App Component và chuyển state của App Component cho Todos.

import Todos from ‘./todos’
...
...
<Todos todos={this.state.todos}></Todos>
...

Bây giờ là kết quả hiển thị trên browser

Đã hiển thị được to-do list dưa trên dữ liệu được thêm vào. Bước tiếp theo chúng ta sẽ viết function cho dấu x để xóa to-do mình muốn.

Chúng ta sẽ sử dụng sự kiện onClick để xóa, điều đầu tiên cần nghĩ đến là state, thay đổi state để làm nó biến mất.

Gán State trong React

State đã được tóm tắt ở phần đầu. Để dễ dàng thao tác thay đổi dữ liệu động trên component. Tuy nhiên, bạn không thể thay đổi state trực tiếp. Nên bạn không thể viết:

this.state.todos.push({‘name’:‘clean room’, ‘id’:4})

Để thay đổi giá trị ta dùng hàm setState() thông qua biến tham chiếu id

deleteTodos=(id)=>{
  let todos=this.state.todos.filter(todo=>{
    return todo.id!==id;
  })
  this.setState({
     todos: todos
  })
}

Chúng ta sẽ chuyển hàm removeTodos () làm props cho Todos component.

<Todos deleteTodos={this.deleteTodos} todos={this.state.todos}>
</Todos>

Bước tiếp theo ta gắn event vào mỗi item cuả todo

const Todos=({deleteTodos,todos})=>{
...
 <li >{todo.name} <button className=”btn btn-delete”
   onClick={()=>{deleteTodos(todo.id)}}> X
               </button>
</li>
</div>
)
...

Vào browser và thử xóa nào :

Và bây giờ, bạn có thể xóa item trong todo list rồi

Tạo component addTodos

Vừa viết xong hàm xóa, giờ đến lượt hàm “add” . Tiếp tục nhìn vào sơ đồ để hiểu được cách thức hoạt động và ý tưởng.

Để chức năng “thêm todo” xuất hiện trên giao diện, cần tạo input để nhập tên của nó. Mỗi khi nhập ký tự vào, state trong React sẽ được cập nhật lại.

Khi bạn tạo component addTodos, mọi thứ sẽ trở nên dễ dàng hơn. Component này sẽ render input cùng với nút thêm bên trong render () dưới dạng mẫu JSX.

Vì vậy, addTodos là một component container và nó sẽ có trạng thái sẽ lưu trữ các công việc mới được thêm vào. Đoạn này sẽ được code như sau:

import React,{Component} from ‘react’;
export default class AddTodos extends Component{
  state={
   ‘name’: null
   }
render(){
 return(
  <div>
    <form>
     <label htmlFor=”item”></label>
     <input type=”text” placeholder=”Add a todo…” id=”item”/>
     <button className=”btn btn-add”>Add</button>
   </form>
  </div>
  )
 }
}

Tiếp theo ta gán state vào component addTodos. Sử dụng setState() như sau để có được kết quả như ý muốn

import React,{Component} from ‘react’;
export default class AddTodos extends Component{
....
handleChange=(e)=>{
 this.setState({
  [‘name’]:e.target.value
})
render(){
...
  <input onChange={this.handleChange} type=”text” placeholder=”Add a todo…” id=”item”/>
....
}

Thêm console.log() để kiểm tra có dữ liệu có đúng hay chưa

handleChange=(e)=>{
  this.setState({
[‘name’]:e.target.value
})
 console.log(this.state);
}

Lưu ý : tất cả đều được render từ component gốc , đó là App Component .Vì vậy, import vào trong App.js và render dưới dạng JSX bên trong hàm render.

...
import AddTodos from ‘./addtodos’;
...
render(){
....
  <AddTodos></AddTodos>
...
}

Quay lại browser và thao tác ngay lập tức để được kết quả như sau

Cách sử dụng event onSubmit

Bây giờ, điều duy nhất còn lại phải làm là thêm các todos đó vào trang khi chúng ta nhấp vào nút thêm. Ở phần này sử dụng event onSubmit để chuyển state của component addTodos trong React. Hãy nhớ rằng: state có thể được truyền dưới dạng props từ component cha sang component con.

Tạo một hàm bên trong component addTodos, lấy todos hiện tại làm tham số, gán id duy nhất cho nó, sau đó thêm nó vào state của component app. Chúng ta chuyển function này dưới dạng props cho component addTodos, kích hoạt nó bên trong hàm onSubmit từ đó chúng ta chuyển state hiện tại của component addTodos sang hàm addTodos ().

...
import AddTodos from './addTodos';
export default class App extends Component{
...
addTodos=(newTodo)=>{
  newTodo.id=this.state.todos[this.state.todos.length-1].id+1;
  let todos=[...this.state.todos,newTodo]
  this.setState({
    todos
 })
...
render(){
  ...
   <AddTodos addTodos={this.addTodos} />
 ...
}

Bây giờ chúng ta cần gọi method làm props và chuyển state của component addTodos làm tham số. Chúng ta sẽ thực hiện điều này bên trong hàm onSubmit, sau khi một event onSubmit được kích hoạt

....
export default class AddTodos extends Component{
...
  handleSubmit=(e)=>{
          e.preventDefault();
         this.props.addTodos(this.state);
         document.querySelector(‘form’).reset();
     }
...
}

Đến bước này, đã gần hoàn tất.

Chúng ta thêm hàm handleSubmit() vào bên trong event onSubmit:

...
export default class AddTodos extends Component{
    ....
    render(){
      return(
          ....
         <form onSubmit={this.handleSubmit}>
          ...
      )
   }
...
}

Kết quả app đã hoàn chỉnh như sau :

Kết luận

Qua phần này, chúng ta đã hiểu rõ hơn về thao tác và cách hoạt động của React. Cùng với kiến thức đã biết ở Tự học React JS thời đại dịch Corona nCoV – Phần 1, giúp bạn có thể viết được một app to-do list cơ bản.