Question

我开发了一个简单的在线商店。我想将数据从js.file传递/提交给另一个js。第一个js文件包含项目的显示。然后我想将数据项传递给包含表格的cart.js。

<section className="products">

        <div className="product-card">
            <div className="product-image">
                <img src={ bagiak }/>
            </div>
            <div className="product-info">
                <h5>Bagiak Tidur</h5>
                <h6>Rp.12000</h6>
                <p>Masukkan Jumlah yang dibeli : </p><input type="number"/><br/><br/>
                <a href="/keranjang" className="button is-success btn-product"><i className="fa fa-shopping-cart"></i>&nbsp;&nbsp;Beli</a>&nbsp;&nbsp;

            </div>
        </div>
</section>

我如何定义数据（＆＃34;产品＆＃34; =＆＃34; bagiak tidur＆＃34;，＆＃34; Price＆＃34; =＆＃34; 12000＆＃34;，＆＃34;数量＆＃34; =＆＃34; 1＆＃34;）我想传递给桌子？当我点击按钮数据输入到表格。这是我的餐桌。

 <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>

我开发了UI网站。所以它不与任何数据库连接。所有数据都在ui级别。希望你知道我的意思。抱歉我的英文不好

Answer 1

在反应中，数据可以通过道具从父组件传递到子组件。在您的情况下，我假设您正在尝试在相同级别组件或兄弟组件之间传递数据。您可以使用可能很棘手的回调，或者您可能需要查看Redux等状态管理库，这有助于数据流。

Answer 2

如果要将一个组件的数据传递给另一个组件。在这种情况下，这些组件是父/子。您可以使用props传递数据。

在您的父组件中，您可以使用这三个道具传递数据。

@Test
public void equalsContract() {
    EqualsVerifier.forClass( MyAwesomeLombokedDataClass.class )
        .suppress( Warning.STRICT_INHERITANCE )
        .verify();
}

在你的子组件中，render方法就是这样。

constructor(props){
super(props);
this.state = {
data = [{
  "id":1,
  "name":'sampleName'
},
{
  "id":2,
  "name":'sampleName2'
}]
};

}
render(){
  let myPropData="string";
   return(
      <ChildComponent passData={this.state.data} />
   );
}

传递数据做出反应

2 个答案: