react购物车demo

Posted 2020-12-30 l8l8

import React, { Component } from ‘react‘;
import ‘./App.css‘;
import {connect} from ‘react-redux‘;
import {bindActionCreators} from ‘redux‘;
import action from ‘./shopcar/reduce/action‘
// ui 组件 只取数据
class App extends Component {
  constructor(props){
    super(props);
    this.addfriut = this.addfriut.bind(this); 
    this.allprice = this.allprice.bind(this);
    this.state = {
      n: 0
    }
  };
  addfriut(){
    this.props.add(this.goods.value,this.price.value);
    this.goods.value=‘‘;
    this.price.value =‘‘
    console.log(this.props);
  };
  allprice(){
    console.log(this.props);
    let {list} = this.props.myReducer;
    let len = list.length;
    let n = 0;
    for(let i=0; i<len;i++){
      n+= list[i].price*this.refs[‘goods‘+i].value||0
    }
    this.setState({
        n
    })
  }
  render() {
   let {list} = this.props.myReducer;
    return (
      <div className="App">
        名字:<input type="text" ref={goods=>this.goods=goods}/>
        <br/>
        价格:<input type="text" ref={price=>this.price=price}/>
        <button onClick={this.addfriut}>addfriut</button>
        <button onClick={this.allprice}>计算价格</button>
      <ul>
          {list.map((item)=>{
            return (
              <li key={item.id}>
                <span>
                水果:{item.goods}  价格:{item.price}
                </span>
                <input type="text" ref={‘goods‘+item.id}/>
              </li> 
            )
        })}
        {this.state.n}
      </ul>
      </div>
    );
  }
}
// // 实现计算属性的操作 类似vuex getters
let mapStateToProps = (state)=>{

  return state
};
// // 将dispatch传进去省区了actions 里的方法去 触发action的内置对象
let mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(App);
// export default App;