Hướng dẫn react-bootstrap form example - Ví dụ về biểu mẫu react-bootstrap

Question

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.

Nội dung chính Show

Chuẩn bị
Sự kiện trong form
Dùng this trong class component
Dùng this trong arrow function
Uncontrolled Component
Controlled component

Chuẩn bị

1. Tạo project với lệnh create-react-app bai4create-react-app bai4

2. Chuyển vào folder project và cài thư viện react-bootstrap

npm install react-bootstrap

3. Trong file App.js. code lại:

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

4. File App.css, xóa hết code lại

.header {
  height: 60px; font-size: 2em;
  display: flex;  align-items: center;  justify-content: center;
}
.footer > div { display: flex; align-items: center; justify-content: center;}

5. Chạy trong trình duyệt, http://localhost:3000, kêt quả sẽ thế này

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

– Tạo file src/FormLogin.js

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

– Trong App.js, import FormLogin:

import FormLogin from './FormLogin';

– Và cho FormLogin hiện ra trong layout

<Row className="d-flex mt-2" style={{minHeight: "300px"}}>
    <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
    <Col sm={3} className="bg-dark" id="ttbosung"> 
      <FormLogin></FormLogin>
    </Col>
</Row>

Sự kiện trong form

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.Click, 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

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

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 layTuKhoathis 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.jssrc/FormSearch.js

import React from 'react';
class FormSearch extends React.Component{
    constructor(){
        super();
        this.state = { url:"/action=search"}
    }
    layTuKhoa(e){
        let tk = e.target.value;
        let url = this.state.url;        
    }
    render(){
       const kq=
        <form className="p-2 border border-white text-center">
            <input onChange={this.layTuKhoa} placeholder="Từ khóa" className="form-control"/>
            <button type="button" className="btn btn-warning btn-sm mt-2">Tìm kiếm</button>
        </form>
        return (kq);
    }
}
export default FormSearch

– Import và cho hiện trong App.js

<Col sm={3} className="bg-dark" id="ttbosung"> 
  <FormLogin></FormLogin>
  <hr/>
  <FormSearch/>
</Col>

Kết quả: khi nhập từ khóa:

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.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.

import React from 'react';
class FormSearch extends React.Component{
    constructor(){
        super();
        this.state = { url:"/action=search"}
    }
    layTuKhoa = (e) => {
        let tk = e.target.value;
        let url = this.state.url;  
        console.log(tk, url);      
    }
    render(){
       const kq=
        <form className="p-2 border border-white text-center">
            <input onChange={this.layTuKhoa} placeholder="Từ khóa" className="form-control"/>
            <button type="button" className="btn btn-warning btn-sm mt-2">Tìm kiếm</button>
        </form>
        return (kq);
    }
}
export default FormSearch

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()this đến component instance bằng phương thức bind()

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

0

Có 2 cách được sử dụng để truy cập giá trị của các phần tử 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(); 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}ref={this.hoten}

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

– Tạo src/FormLienHe.jssrc/FormLienHe.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

1

– Nhúng vào App.js:

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

2

– Đưa form vào layout

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

3

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. Ví dụ:

Ví dụ 2: Tạo src/FormLienHe2.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

4

– Nhúng vào App.js:

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {  Col, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
    <Row className="header bg-primary mb-1 text-white">HEADER </Row>    
    <Row>
        <Col sm={5} md={6} lg={7} style={{height:"350px"}} className="bg-warning p-2" id="tin1">
            Tin 1
        </Col>
        <Col sm={7} md={6} lg={5} className="p-0"> 
            <div id="tin2" style={{height:"175px"}} className="bg-info p-3"> Tin 2 </div>
            <div id="tin3" style={{height:"175px"}} className="bg-secondary p-3"> Tin 3 </div>
        </Col>
     </Row>
      <Row className="d-flex mt-2" style={{minHeight: "300px"}}>
          <Col sm={9} className="bg-info" id="maindata">  MAIN  </Col>
          <Col sm={3} className="bg-dark" id="ttbosung"> THÔNG TIN BỔ SUNG </Col>
      </Row>
    <Row className="footer my-1 bg-dark text-white" style={{minHeight: "120px"}}>
        <Col id="footer1" sm={6} className="bg-warning"> footer 1 </Col>
        <Col id="footer2" sm={3} className="bg-dark"> footer 2 </Col>
        <Col id="footer3" sm={3} className="bg-info"> footer 3</Col>
    </Row>
  </Container>   
  );
}
export default App;

5

– Đưa form vào layout

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. Ví dụ:

Ví dụ 2: Tạo src/FormLienHe2.js