mport Componens from ‘./component.js‘
//React的生命周期
class App extends React.Component {
state = {
counter:1,
show:true,
arr: [
{
id: 1,
name: "西游记",
date: 2000 - 9,
price: 200,
count: 1,
},
{
id: 2,
name: "西游记",
date: 2000 - 9,
price: 100,
count: 1,
},
{
id: 3,
name: "西游记",
date: 2000 - 9,
price: 2030,
count: 1,
},
],
};
delete(e, i) {
// console.log(this.state.arr.splice(i,1));
this.setState({
arr: this.state.arr.filter((v,id,arr)=>{return id !==i})
});
}
add(e, i) {
console.log(e.target);
const arr=[...this.state.arr]
this.setState({
arr: arr.map((v,id,arr)=>{
if(id ===i){
v.count++
}
return v
})
});
}
reduce(e, i) {
console.log(e.target);
const arr=[...this.state.arr]
this.setState({
arr: arr.map((v,id,arr)=>{
if(id ===i){
v.count--
}
return v
})
});
if (this.state.arr[i].count === 0) {
e.target.setAttribute("disabled", "disabled");
console.log(e.target);
}
}
edit(e,i){
this.setState({
show:false
})
}
getprice() {
let totalPrice = 0;
for (let book of this.state.arr) {
totalPrice += book.count * book.price
}
return totalPrice
}
ck(count){
this.setState({
counter:this.state.counter +count
})
}
render() {
return (
<>
<table className="table" border="1" >
<thead className="table_head">
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody className="table_body">
{this.state.arr.map((v, i, arr) => {
return (
<tr key={i}>
<td>{v.id}</td>
<td>{v.name}</td>
<td>{v.date}</td>
<td>{v.price}</td>
<td>
<button
date-id={i}
onClick={(e) => {
this.reduce(e, i);
}}
>
-
</button>
{v.count}
<button
date-id={i}
onClick={(e) => {
this.add(e, i);
}}
>
+
</button>
</td>
<td>
<button
date-id={i}
onClick={(e) => {
this.delete(e, i);
}}
>
移除
</button>
<button onClick={(e)=>{this.edit(e,i)}}>
编辑
</button>
</td>
</tr>
);
})}
</tbody>
</table>
<h1>总价格:{this.getprice()}</h1>
<hr/>
<h3>{this.state.counter}</h3>
<Componens id="5" btn={()=>{ this.ck(1)}} operator="+1"/>
<div className={this.state.show ? ‘dn‘ : "" } id="modal">
<h1>id:1</h1>
<h2>出版日期：</h2>
<input placeholder="请输入价格" value={100} />
</div>
</>
);
}
}
export default App;