Form và sự kiện trong react

Form và sự kiện trong react hướng dẫn bạn cách tạo form trong react và cách lấy các giá trị trong form khi làm web với React.

Form trong React

Thêm form vào react giống như thêm các phần tử html bình thường. Trong form có nút submit và các control như input, select, textarea… Nếu bạn dùng bootstrap, thì thêm các class mà bootstrap hỗ trợ để định dạng cho nhanh. Ví dụ sau tạo 1 form login

// src/FormLogin.js
import React from 'react';
class FormLogin  extends React.Component{    
render(){
 const kq=
  <form className="w-50 p-2 border border-primary m-auto">
     <div className="mb-3">
       <label htmlFor="un">Tên đăng nhập</label>
       <input type="text" id="un" name="un" 
       className="form-control shadow-none border-primary"/>
     </div>
     <div className="mb-3">
       <label htmlFor="pass">Mật khẩu</label>
       <input type="password" id="pass" name="pass" 
       className="form-control shadow-none border-primary"/>
     </div>
     <button type="submit" className="btn btn-primary">
       Đăng nhập
     </button>
  </form>
  return (kq);
 }
}
export default FormLogin;
// App.js
import FormLogin from './FormLogin'; 
function App() {return (
 <div> <FormLogin /> </div>
 ) }
export default App;

Sự kiện trong form

Các sự kiện onClick, onChange, onSubmit … diễn tả giống javascript nhưng nhớ ghi chữ hoa ngay tên chính của sự kiện.

Ví dụ: Xử lý sự kiện trong form login

// src/FormLogin.js
import React from 'react';
class FormLogin  extends React.Component{
getdata(e) { 
  console.log(e.target.id, e.target.value);
} 
render(){ return (
  <form className="w-50 p-2 border border-primary m-auto">
    <div className="mb-3">
      <label htmlFor="un">Tên đăng nhập</label>
      <input type="text" id="un" name="un" onChange={this.getdata} 
      className="form-control shadow-none border-primary"/>
    </div>
    <div className="mb-3">
      <label htmlFor="pass">Mật khẩu</label>
      <input type="password" id="pass" onChange={this.getdata} 
      className="form-control shadow-none border-primary" />
    </div>
    <button type="submit" className="btn btn-primary">
      Đăng nhập
    </button>
  </form>
 )}
}
export default FormLogin;

Sử dụng từ khóa this trong React component

Dùng this trong class component

Trong class component, this không được định nghĩa mặc định. Vì vậy trong các function thông thường, this không phải là “đối tượng này” . Ví dụ: trường hợp sau sẽ lỗi với từ this trong hàm layTuKhoa

– Tạo file  src/FormSearch.js

// src/Abc.js
import React from 'react';
class Abc  extends React.Component{
a = 1;
showA() { console.log("a = " + this.a) } 
render() { return (
  <div> <button onClick={this.showA}> Abc </button> </div> 
 )}
}
export default Abc;
//App.js
import Abc from './Abc'
function App() { return (<div> <Abc/> </div>) }
export default App;

Kết quả: khi nhắp vào nút

Dùng this trong arrow function

Dùng this trong các arrow function sẽ không bị lỗi. Trong arrow function this sẽ được hiểu là “đối tượng này”, tức là instance component hiện tại. Đó là cách thứ nhất để không bị lỗi khi dùng this.

// src/Abc.js
import React from 'react';
class Abc  extends React.Component{
 a = 1;
 showA = () => {  console.log("a = " + this.a) } 
 render() { return (
  <div> <button onClick={this.showA}> Abc </button> </div> 
 )}
}
export default Abc;

Cách 2: nếu phải dùng function thông thường mà không dùng cho arrow function, thì phải liên kết this đến component instance bằng phương thức bind()

// src/Abc.js
import React from 'react';
class Abc  extends React.Component{
  constructor(){
    super();
    this.showA = this.showA.bind(this);
 }
 a = 1;
 showA(){  console.log("a = " + this.a) } 
 render() { return (
  <div> <button onClick={this.showA}> Abc </button> </div> 
 )}
}
export default Abc;

Truy xuất các giá trị trong form

Có 2 cách được sử dụng để truy cập các giá trị mà user đã nhập trong form là Controlled Component và Uncontrolled Component

Uncontrolled Component

Uncontrolled input: giống như input HTML truyền thống, không cần viết hàm xử lý sự kiện cho mỗi lần cập nhật  giá trị trong input. Mà tạo ref và gán ref cho tag . Nhờ đó sẽ có thể truy xuất giá trị của tag trong form.

Tạo ref bằng cách sử dụng hàm React.creacteRef trong constructor() và cho ref 1 tên. Ví dụ: this.hoten =  React.createRef();

Gán ref cho 1 tag HTML bằng cách dùng thuộc tính ref trong tag html. Ví dụ: ref={this.hoten}

Chú ý: trong component, khi truy cập đến ref (this.hoten.current) là đang tham chiếu đến cả tag html.

// src/FormLogin.js
import React from 'react';
class FormLogin  extends React.Component{
  constructor(){
    super();
    this.username =  React.createRef();
    this.password =  React.createRef();
  }
  submitDuLieu = (e) =>{
    console.log(this.username.current.value);
    console.log(this.password.current.value);
    e.preventDefault();
  }
  render(){ return (
  <form method="post" onSubmit={this.submitDuLieu} 
  className="w-50 p-2 border border-primary m-auto">
    <div className="mb-3">
      <label htmlFor="un">Tên đăng nhập</label>
      <input type="text" ref={this.username} 
      className="form-control shadow-none border-primary"/>
    </div>
    <div className="mb-3">
      <label htmlFor="pass">Mật khẩu</label>
      <input type="password" ref={this.password}  
      className="form-control shadow-none border-primary" />
    </div>
    <button type="submit" className="btn btn-primary">
      Đăng nhập
    </button>
  </form>
 )}
}
export default FormLogin;
// App.js
import FormLogin from './FormLogin'; 
function App() {return (  <div> <FormLogin/> </div>) }
export default App;

Controlled component

Controlled component liên kết giá trị trong tag với state, liện liên kết này  xử lý bằng cách tạo các hàm xử lý và gọi khi có sự thay đổi giá trị của tag. 

// src/FormLogin.js
import React from 'react';
class FormLogin  extends React.Component{
  constructor(){
    super();
    this.state = {un:"", pw:""}
  }
  ganUN = (e) =>  this.setState( {un:e.target.value})
  ganPW = (e) =>  this.setState( {pw:e.target.value})
  submitDuLieu = (e) =>{
    console.log(this.state);
    e.preventDefault();
}
render(){ return (
  <form method="post" onSubmit={this.submitDuLieu} 
  className="w-50 p-2 border border-primary m-auto">
    <div className="mb-3">
      <label htmlFor="un">Tên đăng nhập</label>
      <input value={this.state.un} onChange={this.ganUN}
      type="text" className="form-control border-primary"/>
    </div>
    <div className="mb-3">
      <label htmlFor="pass">Mật khẩu</label>
      <input value={this.state.pw} onChange={this.ganPW}
       type="password" className="form-control border-primary" />
    </div>
    <button type="submit" className="btn btn-primary">
      Đăng nhập
    </button>
  </form>
 )}
}
export default FormLogin;
// App.js
import FormLogin from './FormLogin'; 
function App() {return (
 <div> <FormLogin /> </div>
 ) }
export default App;

Trên đây là các ví dụ về cách dùng Form và sự kiện trong react, cũng không khó phải không. Các bạn có thể tham khảo thẻm ở địa chỉ sau: https://www.w3schools.com/react/react_forms.asp .

Liên quan đến chủ đề Form và sự kiện trong react, các bạn đọc thêm bài này nữa nhé Sử dụng Redux form

BÀI VIẾT LIÊN QUANXEM THÊM