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

 

 1:State

    -     là trạng thái của component.

    -    Khai báo những giá trị cần lưu trữ của riêng component đó.

    -    Tạo state tại contructor. Gọi this.state = {key : value,key1 : value1,..}

    -    Gọi state: this.state.key

Ví Dụ: Coppy lai foder bài trước chúng ta sữa lại mã nguồn như sau:

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

class App extends Component{
	constructor(props){
		super(props);
		this.state = {
			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,
				},
			],
			isActive : true
		};
	}
	render() {
		let elements = this.state.product.map((product,index) => {
			if(product.status){
				return	<tr key = {product.id}>
								<td>{index}</td>
								<td>{product.name}</td>
								<td>
									<span className="label label-success">{product.price} VNĐ</span>
								</td>
							</tr>
			}
		});
		return (
			<div>
				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">State</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<table className="table table-bordered table-hover">
								<thead>
									<tr>
										<th>STT</th>
										<th>Tên Sản Phẩm</th>
										<th>Giá</th>
									</tr>
								</thead>
								<tbody>
									{elements}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		);
	}
 }

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

trong tập tin Product.js thay đổi mã nguồn như 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>

=> xem kết quả:

    -    Thay đổi state: this.setState({key : value,key1 : value1,..}).

    -     Khi setState được gọi => hàm render được gọi.

    -    Thực hành : viết button toggle ẩn hiện giá trị, sort table.

Props	State
Nhận dữ liệu từ bên ngoài	Dữ liệu nội bộ
Không thể thay đổi giá trị	Có thể thay đổi giá trị
	Phạm vi Private trong Component

Ví Dụ: Coppy lai foder bài trước chúng ta sữa lại mã nguồn như sau:

trong tập tin App.js thay đổi mã nguồn như sau:

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

class App extends Component{
	constructor(props){
		super(props);
		this.state = {
			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,
				}
			], 
			isActive : true
		}; 
		this.onSetState = this.onSetState.bind(this);
	}
	onSetState(){
		//if(this.state.isActive === true){
			//this.setState({
				//isActive : false
			//});
		//}else{
			//this.setState({
				//isActive : true 
			//})
		//}
		this.setState({
				isActive : !this.state.isActive
			})
	}
	render() {
		let elements = this.state.product.map((product,index) => {
			if(product.status){
				return	<tr key = {product.id}>
								<td>{index}</td>
								<td>{product.name}</td>
								<td>
									<span className="label label-success">{product.price} VNĐ</span>
								</td>
							</tr>
			}
		});
		return (
			<div>
				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">State</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<table className="table table-bordered table-hover">
								<thead>
									<tr>
										<th>STT</th>
										<th>Tên Sản Phẩm</th>
										<th>Giá</th>
									</tr>
								</thead>
								<tbody>
									{elements}
								</tbody>
							</table>
							<button type="button" className="btn btn-warning" onClick={this.onSetState}>
								Active : {this.state.isActive === true ? 'true' : 'false'}
							</button>
						</div>
					</div>
				</div>
			</div>
		);
	}
 }

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

trong tập tin Product.js thay đổi mã nguồn như 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>

=> xem kết quả: 

sau khi click vào active chuyển sang giá trị false