react中模板的css修改

Question

我找到了一个不错的模板用于我的购物车页面Reference Template Link

我基本上是在修改它，使顶部（产品、价格、数量、小计）标题只出现一次，数据所在的中间部分重复多次，按钮部分也呈现一次。

我曾尝试以这种方式进行操作，但由于这个原因，我的 CSS 搞砸了，我无法纠正自己。

这是我当前修改的购物车页面的截图。

如您所见，对齐已关闭。我需要更正此问题。

这是相同的相关代码。

view_cart.js


import React from 'react'
import App from './App'
import Cookies from 'universal-cookie'
import './view_cart.css'
import {ToastContainer, toast,style} from 'react-toastify'

var hiding='';
class View_cart extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={item_list:{},"total_items_price":'',product_count:''}
    this.view_cart_details=this.view_cart_details.bind(this)
    this.delete_item_cart=this.delete_item_cart.bind(this)
    this.product_state=this.product_state.bind(this)
    this.update_per_item_details=this.update_per_item_details.bind(this)
  }

  registeration_notification(value_to_render)
  {
    toast(value_to_render,
      {
        //position: toast.POSITION.BOTTOM_CENTER,
        autoClose: 3000,
      }
    );
  }

  product_state(e,product_name,manufacturer)
  {
    this.setState({"product_count":e.target.value})
    console.log(this.state.product_count)
    //console.log(product_name,manufacturer)
    this.update_per_item_details(product_name,manufacturer)
  }

  update_per_item_details(product_name,manufacturer)
  {
    fetch('http://127.0.0.1:8000/delete_item_cart/',
    {
      method:"PUT",
      headers:
      {
      'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
      body:JSON.stringify({"product_name":product_name,"manufacturer":manufacturer,quantity:this.state.product_count})
  })
  .then(something =>something.json())
  .then(findResponse =>
    {
      console.log(findResponse,typeof(findResponse))
      if((Object.keys(findResponse).length)===1 && (Object.keys(findResponse).includes("message")))
      {
        //hiding='displayNone';
        //console.log(hiding)
        //console.log("A user with this name already exists.")
        this.registeration_notification("The Quantity and the amount have been changed.")
        this.view_cart_details()
      }
    }
  )
  }

  display_cart()
  {
    //console.log(Object.keys(this.state.item_list))
    const mapping = Object.keys(this.state.item_list).map((item,id) =>
    {
      console.log(this.state.item_list[item]['image_path'])
      var location = require('./Images/'.concat(this.state.item_list[item]['image_path']))
      //console.log(location)
      return (
        <div className="container">
          <table id="cart" className="table table-hover table-condensed">
            <tbody>
              <tr>
                <td data-th="Product">
                  <div className="row" style={{width:1000}}>
                    <div className="col-sm-1 hidden-xs"><img src={location} alt="..." className="img-responsive"/></div>
                    <div className="col-sm-3">
                      <h4 className="nomargin">{this.state.item_list[item]["Name"]} {'by '.concat(this.state.item_list[item]["manufacturer"])}</h4>
                    </div>
                  </div>
                </td>
                <td data-th="Price">{this.state.item_list[item]["original_price"]}</td>
                <td data-th="Quantity">
                  <select onClick={(e) => this.product_state(e,this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
                </td>
                <td data-th="Subtotal" className="text-center">{this.state.item_list[item]['price']}</td>
                <td className="actions" data-th="">
                  <button className="btn btn-danger btn-sm" onClick={() =>this.delete_item_cart(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}><i className="fa fa-trash-o"></i></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
          )
    })
  return mapping
}

  sample_cookie_output()
  {
    const test_cookie_testing = new Cookies();

    var auth_string='Token '
    console.log((auth_string.concat(test_cookie_testing.get('Authorization'))),typeof((auth_string.concat(test_cookie_testing.get('Authorization')))))
    return (auth_string.concat(test_cookie_testing.get('Authorization')))
  }

  delete_item_cart(product_name_delete,manufacturer_name)
  {
    fetch('http://127.0.0.1:8000/delete_item_cart/',
    {
      method:"POST",
      headers:
      {
      'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
      body:JSON.stringify({"product_name":product_name_delete,"manufacturer":manufacturer_name})

  })
  .then(something =>something.json())
  .then(findResponse =>
    {
      console.log(findResponse,typeof(findResponse))
      if((Object.keys(findResponse).length)===1 && (Object.keys(findResponse).includes("Data Deletion")))
      {
        hiding='displayNone';
        console.log(hiding)
        //console.log("A user with this name already exists.")
        this.registeration_notification("The Product has been removed from the cart")


      }
    }
  )
  }

  view_cart_details()
  {
    fetch('http://127.0.0.1:8000/view_cart/',
    {
      method:"GET",
      headers:
      {
        'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
  })
.then(something =>something.json())
.then(findResponse =>
  {
    console.log(findResponse)
    this.setState({"item_list":findResponse[0],"total_items_price":findResponse[1]})
  }

)
  }

componentDidMount(){
  this.view_cart_details()
}

render(){
  return (
    <div>
      <App/>
      <div>
        <table id="cart" className="table table-hover table-condensed">
          <thead>
            <tr>
              <th style={{width:"50%"}}>Product</th>
              <th style={{width:"10%"}}>Price</th>
              <th style={{width:"8%"}} className="text-center">Quantity</th>
              <th style={{width:"22%"}} className="text-center">Subtotal</th>
              <th style={{width:"10%"}}></th>
            </tr>
          </thead>
          {this.display_cart()}
          <tfoot>
            <tr className="visible-xs">
              <td className="text-center"><strong>Total {this.state.total_items_price}</strong></td>
            </tr>
            <tr>
              <td><a href="/display/" className="btn btn-warning"><i className="fa fa-angle-left"></i> Continue Shopping</a></td>
              <td colSpan="1" className="hidden-xs"></td>
              <td><a href="/checkout" className="btn btn-success">Checkout<i className ="fa fa-angle-right"></i></a></td>
              <td className="hidden-xs text-center"><strong>{this.state.total_items_price}</strong></td>
            </tr>
          </tfoot>
        </table>
        <ToastContainer/>
      </div>
    </div>
)
}
}

export default View_cart




    view_cart.css

.table>tbody>tr>td, .table>tfoot>tr>td{
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
    table#cart tbody td .form-control{
        width:20%;
        display: inline !important;
    }
    .actions .btn{
        width:36%;
        margin:1.5em 0;
    }

    .actions .btn-info{
        float:left;
    }
    .actions .btn-danger{
        float:right;
    }

    table#cart thead { display: none; }
    table#cart tbody td { display: block; padding: .6rem; min-width:320px;}
    table#cart tbody tr td:first-child { background: #333; color: #fff; }
    table#cart tbody td:before {
        content: attr(data-th); font-weight: bold;
        display: inline-block; width: 8rem;
    }

    table#cart tfoot td{display:block; }
    table#cart tfoot td .btn{display:block;}
}

附带说明-我如何学习如何自己正确修改CSS 样式？

Answer 1

通过使用和删除 display_cart 函数中的顶部表格标签解决了这个问题。