流年*https://i.cnblogs.com/files

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;

posted on   流年*  阅读(32)  评论(0编辑  收藏  举报

编辑推荐:
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
阅读排行:
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示