在反应中实现复选框 [英] Implementing check boxes in react

问题描述

我正在尝试实现产品列表.

我所做的如下，

 import React, { Component } from 'react';从reactstrap"导入 { Row, Col, Card, CardBody };从'react-router-dom'导入{ withRouter，链接}；import { activateAuthLayout, onLoad } from '../../../store/actions';从'react-redux'导入{连接}；从'../Subpages/Settingmenu'导入设置菜单；//图片从'../../../images/users/user-1.jpg'导入default_image；const ListProducts = props =>{if (props.is_loading === true)返回 (<tr><td colSpan=7">正在加载....</td></tr>);返回 (props.products.map(product => {返回  a.inventory_quantity),total_count = 数量.reduce((a, b) => a + b, 0) + ' in stock ';返回 (<tr><td><输入类型=复选框"已检查={this.props.is_checked}onChange={this.props.handleIndividualCheck}/></td><td><div className=media mb-4"><img className="d-flex align-self-start rounded mr-3";src={this.props.product.image ?this.props.product.image.src : default_image} alt=Veltrix"高度=64"/><div className="media-body"><p style={{ fontWeight: '600', fontSize: 'small' }} className=product-list-title text-justify">{this.props.product.title}</p>

</div></td><td style={{ textAlign: "center"}}>{total_count}</td><td><span className=徽章徽章-软-主要徽章-药丸"><i className=mdi mdi-checkbox-blank-circle mr-1"</i>{this.props.product.product_type ||'n/a'}</span></td><td>{this.props.product.vendor}</td></tr>)}}类 ProductLists 扩展组件 {构造函数(道具){超级(道具)；this.state = {};}使成为() {控制台日志(this.props)返回 (<table className="table project-table"><头><tr><th style={{ width: '3px' }}><input onClick={this.props.handleSelectCheckbox} type=checkbox"/></th><th style={{ width: '30%' }} scope=col">Products</th><th style={{ textAlign: 'center' }} scope=col">Inventory</th><th style={{ width: '15p%' }} scope=col">type</th><th scope=col">Vendor</th></tr></thead><列出产品产品={this.props.products}is_loading={this.props.is_loading}is_checked={this.props.is_checked}handleIndividualCheck={this.props.handleIndividualCheck}/></tbody>);}}类 EcommerceProductEdit 扩展组件 {构造函数(道具){超级(道具)；this.state = { 已检查:false }}componentDidMount() {this.props.activateAuthLayout();if (this.props.user !== null && this.props.user.shop_id)this.props.onLoad({有效载荷:this.props.user});}handleSelectCheckbox = 事件 =>{this.setState({ 检查: !this.state.checked });};handleIndividualCheck = 事件 =>{控制台日志(事件)；}使成为() {返回 (<React.Fragment><div className="内容"><div className="container-fluid"><div className="page-title-box"><Row className="align-items-center"><Col sm=6"><h4 className="page-title">产品 </h4><ol className=面包屑"><li className=breadcrumb-item"><Link to=#"><i className=mdi mdi-home-outline"></i></Link></li><li className="breadcrumb-item active">Products</li></ol></Col><Col sm=6"><div className="float-right d-none d-md-block"><设置菜单/>

</Col></行>

<行><Col xl=3"md=6"><Card className="bg-pattern"><卡片体><div className="float-right"><i className="dripicons-archive text-primary h4 ml-3"</i>

<h5 className="font-20 mt-0 pt-1">24</h5><p className="text-muted mb-0">总项目</p></CardBody></卡片></Col><Col xl=3"md=6"><Card className="bg-pattern"><卡片体><div className="float-right"><i className="dripicons-trophy text-primary h4 ml-3"</i>