Bài 02 : Khóa Học React

Bài 02 : Khóa Học React

codersulution Thứ Tư, tháng 8 24, 2022

 


 1: Handing Events.

    -    có hai cách chỉ sử dụng ES6.

    -    Bắt sự kiện các buttun, input, select: onclick,...

    -    Khai báo function ES6.

    - Gọi thông báo qua tên function và không có ().

    -    Gọi thông qua arow function: {() => this.onClick(params)}

trong tập tin App.js nhập mã nguồn :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import './App.css';
import Product from './Component/Product';

class App extends Component{

	onclick(){
		console.log("đây là MyApp");
	}
 	render() {
 		var product =[
 			{
 				id : 1,
 				name : 'Apple Iphone 7 Plus 32GB',
 				price : 8000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 2,
 				name : 'Apple Iphone 8 Plus 32GB',
 				price : 10000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 3,
 				name : 'Apple Iphone 10 Plus 32GB',
 				price : 15000000,
 				image : 'https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz=',
 				status :true,
 			},
 		];
 		let elements = product.map((product,index) => {
			if(product.status){
				return	<Product
						key = {product.id}
						price={product.price}
						image={product.image}
						>
							{product.name}
						</Product>
			}
		});
 		return (
 			<div>
 				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">Props</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								{elements}						
							</div>	
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<button type="button" clasName="btn btn-default" onClick={this.onclick} >
								Click me!
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
  		);
 	}
 }

export default App;
//]]>
</script>

trong tập tin product.js nhập mã nguồn sau:
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';

class Product extends Component{
	onAddToCard(text){
		alert(text);
		console.log(text);
	}
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.children} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.children}
 							</h3>
 							<p>
 								{this.props.price}	VNĐ						
 							</p>
 							<p>
 								<a  className="btn btn-primary" onClick ={ () => {this.onAddToCard('Mua Thành Công')} }>Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }
export default Product;

//]]>
</script>
=> kết quả là : khi click vào ,mua ngay sẽ hiển thị hộp thoại 

    -    Gọi và sử dụng props C1:

            -    Tạo contructor có tham số props và gọi super(props).

            -    Để truy cập this tại function : this.Tên_function = this.Tên-function.bind(this).

Ví Dụ trong tập tin ở trên ta sữa lại mã nguồn

trong tập tin App.js nhập mã nguồn :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import './App.css';
import Product from './Component/Product';

class App extends Component{

	onclick(){
		console.log("đây là MyApp");
	}
 	render() {
 		var product =[
 			{
 				id : 1,
 				name : 'Apple Iphone 7 Plus 32GB',
 				price : 8000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 2,
 				name : 'Apple Iphone 8 Plus 32GB',
 				price : 10000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 3,
 				name : 'Apple Iphone 10 Plus 32GB',
 				price : 15000000,
 				image : 'https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz=',
 				status :true,
 			},
 		];
 		let elements = product.map((product,index) => {
			if(product.status){
				return	<Product
						key = {product.id}
						price={product.price}
						image={product.image}
						>
							{product.name}
						</Product>
			}
		});
 		return (
 			<div>
 				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">Props</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								{elements}						
							</div>	
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<button type="button" clasName="btn btn-default" onClick={this.onclick} >
								Click me!
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
  		);
 	}
 }

export default App;

//]]>
</script>

trong tập tin product.js nhập mã nguồn sau:
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';

class Product extends Component{
	constructor(props) {
		super(props);
		this.onAddToCard = this.onAddToCard.bind(this);
	};
	onAddToCard(){
		alert(this.props.children);
	}
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.children} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.children}
 							</h3>
 							<p>
 								{this.props.price}	VNĐ						
 							</p>
 							<p>
 								<a  className="btn btn-primary" onClick={this.onAddToCard }>Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }
export default Product;

//]]>
</script>
=> kết quả là : khi click vào ,mua ngay sẽ hiển thị hộp thoại 

    -    Gọi và sử dụng props C2:

             -    Tên_Function = () => {}

Ví Dụ trong tập tin ở trên ta sữa lại mã nguồn

trong tập tin App.js nhập mã nguồn :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import './App.css';
import Product from './Component/Product';

class App extends Component{

	onclick(){
		console.log("đây là MyApp");
	}
 	render() {
 		var product =[
 			{
 				id : 1,
 				name : 'Apple Iphone 7 Plus 32GB',
 				price : 8000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 2,
 				name : 'Apple Iphone 8 Plus 32GB',
 				price : 10000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 3,
 				name : 'Apple Iphone 10 Plus 32GB',
 				price : 15000000,
 				image : 'https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz=',
 				status :true,
 			},
 		];
 		let elements = product.map((product,index) => {
			if(product.status){
				return	<Product
						key = {product.id}
						price={product.price}
						image={product.image}
						>
							{product.name}
						</Product>
			}
		});
 		return (
 			<div>
 				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">Props</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								{elements}						
							</div>	
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<button type="button" clasName="btn btn-default" onClick={this.onclick} >
								Click me!
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
  		);
 	}
 }

export default App;


//]]>
</script>

trong tập tin product.js nhập mã nguồn sau:
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';

class Product extends Component{

	onAddToCard2 = () => {
		alert(this.props.children);
	}
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.children} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.children}
 							</h3>
 							<p>
 								{this.props.price}	VNĐ						
 							</p>
 							<p>
 								<a  className="btn btn-primary" onClick={this.onAddToCard2 }>Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }
export default Product;


//]]>
</script>

=> kết quả là : khi click vào ,mua ngay sẽ hiển thị hộp thoại 
codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash