React 传参
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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡