父组件
import React, { Component } from 'react' import Lists from '../components/Lists' export default class Cart extends Component { // 数据 状态 state = { carts: [ { id: 1, name: '苹果11', price: 10, num: 1 }, { id: 2, name: '小米10', price: 20, num: 1 }, { id: 3, name: '华为meta40', price: 30, num: 1 } ] } render() { return ( <div> {/* 功能组件 */} <Lists carts={this.state.carts} handlerCartNum={this.handlerCartNum.bind(this)} /> </div> ) } handlerCartNum(index, flag = 'incr') { let carts = this.state.carts if ('incr' === flag) { carts[index].num++ /* this.setState({ carts }) */ /* this.setState(state=>{ return { carts } }) */ } else { // splice删数组中的数据影响原数组 carts.splice(index, 1) } this.setState(state => ({ carts })) } }
子组件
import React, { Component } from 'react' import '../styles/lists.css' import PropTypes from 'prop-types' export default class Lists extends Component { static propTypes = { carts: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, num:PropTypes.number })) } render() { let { carts } = this.props return ( <ul> { carts.map((item, index) => ( <li key={item.id}> <span>ID:{item.id}</span> <span>名称:{item.name}</span> <span>价格:{item.price}</span> <span>数量: <button onClick={this.incr.bind(this, index)}>+</button> {/* <button onClick={() => this.incr(index)}>+</button> */} {item.num} <button onClick={this.decr.bind(this, index)}>-</button> </span> <span>小计:{item.num * item.price}</span> </li> )) } </ul> ) } incr(index) { // 调用父级中的props传入的函数方法 this.props.handlerCartNum(index) } decr(index) { // 调用父级中的props传入的函数方法 this.props.handlerCartNum(index, 'decr') } }
右侧赞助一下 代码改变世界一块二块也是爱