Question

我正在建立一个简单的网上商店。它不会连接到任何api和数据库进行测试。我有阵列数据显示主页上的项目。当访问者点击他们想要的项目上的购买按钮时，数据（如名称，价格和数量）应该发布到购物车。我想知道如何做出反应 - 如何将数据发送到另一个组件。This is my homepage screenshot和this is my cart screenshot。当我点击主页上的“beli”（购买）按钮时，它会将数据发送到keranjang belanja页面（购物车）中的表格。

这是我的主页.js

let barang = [{
  "id" : "001",
  "nama_barang" : "bolu kuwuk",
  "harga" : 10000,
  "gambar" : bolukuwuk
},
{
  "id" : "002",
  "nama_barang" : "bolu kering",
  "harga" : 12000,
  "gambar" : bolukering

},
{
  "id" : "003",
  "nama_barang" : "Widaran",
  "harga" : 10000,
  "gambar" : widaran
},
{
  "id" : "004",
  "nama_barang" : "Keciput",
  "harga" : 10000,
  "gambar" : keciput
}
];

class Homepage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      json: [],
      search: '',
    }
  }

  componentDidMount() {
    this.setState((prevState) => {
      return {
        json: barang
      }
    })
  }

  render() {
    let filteredJson = this.state.json.filter(
      (data) => {
        return data.nama_barang.toLowerCase().indexOf(
          this.state.search.toLocaleLowerCase()) !== -1
      }
    );

    return (
      <div>
        <div className="field has-addons">
          <div className="control">
            <input 
              className="input" 
              type="text" 
              value={this.state.search} 
              onChange={this.updateSearch.bind(this)} 
              placeholder="Cari Barang . . . "
            />
        </div>
        <div className="control">
          <a className="button is-info">
            <i className="fa fa-search"></i>
          </a>
        </div>
      </div>

      <section className="products">
        {filteredJson.map((data, i) => {
          return (         
            <div className="product-card" key={i}>
              <div className="product-image">
                <img src={  data.gambar }/>
              </div>
              <div className="product-info">
                <h5>{data.nama_barang}</h5>
                <h6>{data.harga}</h6>
                <p>Masukkan Jumlah yang dibeli : </p><input type="number" name="jumlah"  onChange={ this.handleChange } /><br/><br/>
                <button className="button is-success btn-product" onClick={this.handleSubmit}><i className="fa fa-shopping-cart"></i>&nbsp;&nbsp;Beli</button>&nbsp;&nbsp;
              </div>
          </div>);
        })}  
      </section>

这是我的cart.js

class cart extends Component{

  handleDelete(id) {
  }

  render (){
    return (
      <table id="cart" className="table table-hover table-condensed">
        <thead>
          <tr>
            <th styles="width:50%" className="text-center">Nama Produk</th>
            <th styles="width:10%" className="text-center">Harga</th>
            <th styles="width:8%" className="text-center">Jumlah</th>
            <th styles="width:22%" className="text-center">Subtotal</th>
            <th styles="width:10%" className="text-center">Action</th>
          </tr>
        </thead>
      <tbody>
      {this.state.json.map((data, i) => {
        var subtotal = data.harga*data.jumlah;
        const id = data.id;   
        return (
          <tr key={i}>
            <td data-th="Product">
              <div className="row">
                <div className="col-sm-10">
                  <h4 className="nomargin">{data.nama_barang}</h4>
                </div>
              </div>
            </td>
            <td data-th="Price">Rp.{data.harga}</td>
            <td data-th="Quantity">{data.jumlah} </td>
            <td data-th="Subtotal" className="text-center">Rp.{subtotal}</td>
            <td className="actions" data-th="">
              <button onClick={ () => this.handleDelete(id) } className="button is-danger"><i className="fa fa-trash-o"></i></button>                               
            </td>
           </tr>);
         })}  
         </tbody>
         <tfoot>
           <tr>
             <td><Link to ="/" className="button is-warning"><i className="fa fa-angle-left"></i> Lanjut Berbelanja</Link></td>
             <td></td>
             <td>Total </td>
             <td className="hidden-xs text-center"><strong>Rp. { total }</strong></td>
             <td>{/*<Link to ="/transaksi" className="button is-success">Checkout <i className="fa fa-angle-right"></i></Link>*/}</td> 
           </tr>
         </tfoot>
       </table>
    );
  }
}

Answer 1

如果我理解正确，请尝试：

 onClick={()=> this.handleSubmit(data)}

将数据数组发布到另一个组件中的表

1 个答案: