Hướng dẫn react-bootstrap form align center - trung tâm căn chỉnh biểu mẫu phản ứng-bootstrap

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

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

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

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

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

import React from 'react';
class FormLogin  extends React.Component{    
render(){
 const kq=
  

      

        Tên đăng nhập
        
      
      

        Mật khẩu
        
      
      Đăng nhập
  
  return (kq);
}
}
export default FormLogin;

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

import FormLogin from './FormLogin'; 

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

– Trong App.js, import FormLogin: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à cho FormLogin hiện ra trong layout

import React from 'react';
class FormLogin  extends React.Component{   
getdata(e){
  console.log(e.target.id, e.target.value);
} 
render(){
 const kq=
  

      

        Tên đăng nhập
        onChange={this.getdata} className="form-control" id="un"/>
      
      

        Mật khẩu
        onChange={this.getdata} className="form-control" id="pass"/>
      
      Đăng nhập
  
  return (kq);
}
}
export default FormLogin;

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

Ví dụ: Xử lý sự kiện trong form loginsrc/FormSearch.js

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

– Import và cho hiện trong App.jsthis 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.

Kết quả: khi nhập từ khóa:this đến component instance bằng phương thức bind()

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.

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

– Nhúng vào App.js:

– Đư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

– Nhúng vào App.js:

– Đư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ụ:

.not-found-container {
  min-height: 95vh !important;
}

npm install react-bootstrap 

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 (
    
    HEADER     
    
        

Reply 9 0 Chia sẻ