react 阶段案例-3

结构搭建

<style>
	 table{
		 border:1px solid #eee;
		 border-collapse: collapse; /* 合并边框 */
	 }
	 th,td{
		 border:1px solid #eee;
		 padding: 10px 16px;
		 text-align: center;
	 }
	 th{
		 background-color: #ccc;
	 }
	 .count{
		 margin:0 5px;
	 }
</style>

<script type="text/babel">
	class App extends React.Component{
		constructor(){
			super();
			this.state={
				books:[
					{
						id:1,
						name:'算法',
						date:'2006-9',
						price:85.00,
						count:1
					},
					{
						id:2,
						name:'UNIX',
						date:'2006-2',
						price:59.00,
						count:1
					},
					{
						id:3,
						name:'代码大全',
						date:'2006-3',
						price:128.00,
						count:1
					},
					{
						id:4,
						name:'编程',
						date:'2008-10',
						price:39.00,
						count:1
					}
				]
			}
		}
		render(){
			return(
				<div>
					<table>
						<thead>
							<tr>
								<th></th>
								<th>书籍名称</th>
								<th>出版日期</th>
								<th>价格</th>
								<th>购买数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							{
								this.state.books.map((item,index)=>{
									return (
										<tr>
											<td>{index+1}</td>
											<td>{item.name}</td>
											<td>{item.date}</td>
											<td>{item.price}</td>
											<td>
												<button type="button">-</button>
												<span className="count">{item.count}</span>
												<button type="button">+</button>
											</td>
											<td>
												<button type="button">移除</button>
											</td>
										</tr>
									)
								})
							}
						</tbody>
					</table>
				</div>
			)
		 }
	}
	ReactDOM.render(<App/>,document.getElementById("app"));
 </script>

格式化价格，封装函数

format_utils.js

function formatPrice(price){
	if(typeof price != "number"){
		price = Number("aaa") || 0;
	}
	return "¥" + price.toFixed(2);
}

总价格显示

<h2>总价格：{formatPrice(this.getTotalPrice())}</h2>

getTotalPrice(){
	let totalPrice=0;
	for(let item of this.state.books){
		totalPrice += item.price * item.count;
	}
	return totalPrice;
}

移除按钮操作

react设计原则：state中的数据不可变性

<button type="button" onClick={e=>this.removeBook(index)}>移除</button>

removeBook(index){
	this.setState({
		books:this.state.books.filter((item,indey)=>index!=indey)
	})
}

书籍数量改变

<button type="button" disabled={item.count<=1} onClick={e=>this.changeBooksCount(index,-1)}>-</button>
<span className="count">{item.count}</span>
<button type="button" onClick={e=>this.changeBooksCount(index,1)}>+</button>

changeBooksCount(index,type){
	const newBooks=[...this.state.books]; // 不违背state不可变原则
	newBooks[index].count =  newBooks[index].count + type;
	this.setState({
		books:newBooks
	})
}