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

  

1: Refs

    -    Lấy giá trị thông qua refs. VD lấy giá trị ô input,textarea,v.v...

    -    Cú pháp : thêm thuộc tính ref="key"

    -    Lấy giá trị : this.refs.key.value

Ví Dụ: coppy lại thư mục bài trước sửa lại mã nguôn:

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>

Tập tin App,js Nhập mã nguồn 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.onAddProduct = this.onAddProduct.bind(this);
    };
    onAddProduct(){
	console.log(this.refs.name.value );
    };
     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">Event-Ref</a>
	</div>
    </nav>
    <div className="container">
	<div className="row">
            <div className="row">
	        <div class="panel panel-danger">
		    <div class="panel-heading">
			<h3 class="panel-title">Thêm sản phẩm</h3>
	            </div>
		    <div class="panel-body">
		        <div class="form-group">
		        <label>Tên Sản Phẩm</label>
			<input type="text" class="form-control" ref="name"/>
			</div>
			<button type="submit" class="btn btn-primary" onClick={this.onAddProduct}>Submit</button>
		    </div>
		</div>					
		<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>

 => ta truy cập lại trên trình duyệt xem kết quả:

Chú ý : để ý phần console sẽ lấy ra được giá trị nhập vào ở ô input.