React和AJax的使用

在页面中动态显示从后台获取到的数据，这个时候需要发送ajax请求.
//在hook函数componentDidMount中进行数据请求，并把获取的数据更新到组件状态中。

   componentDidMount() {
    //先执行Ajax数据请求，全局的get方法
      this.serverRequest = $.get("http://127.0.0.1:8081", function (result) {
        console.log(result)
      let items=getItem(result);
      console.log(items)
     //在根据数据更新组件状态
        this.setState({
        value:items
        });
      }.bind(this));
  }

动态生成表格时的响应事件

在动态生成表格时候，需要一个点击事件，但是总是报错，原因是this没有绑定正确。

 let trs=this.state.value.map(function(item,i){
     return (<tr key={i} id={item.barcode}>
     <td>{item.name}</td>
     <td>{item.unit}</td>
     <td>{item.price}元</td>
     <td>{item.charge}</td>
     <td> <button onClick={this.handleClick}>加入购物车</button><input type="text" placeholder="请输入数量" className="inputNumber" ></input></td></tr>)
   }.bind(this))

React中动态生成完整的表格

let trs=this.state.value.map(function(item,i){
     return (<tr key={i} id={item.barcode}>
     <td>{item.name}</td>
     <td>{item.unit}</td>
     <td>{item.price}元</td>
     <td>{item.charge}</td>
     <td> <button onClick={this.handleClick}>加入购物车</button><input type="text" placeholder="请输入数量" className="inputNumber" ></input></td></tr>)
   }.bind(this))
    return (    
      <div className="App">
      <div id="shop">
      <h1 align="center">购物商城</h1>
       <table id="itemtable" className="table table-striped">
        <thead>
          <tr>
           <th>名称</th>
           <th>规格</th>
           <th>价格</th>
           <th>优惠</th>
           <th >操作</th>
          </tr>
          </thead>
          <tbody ref="item">
          {trs}
         </tbody>
       </table>
       <button onClick={this.handleCheck}> 查看购物车</button>
       </div>
</div

React中点击表格中的按钮，想要获取该按钮的id.

 event = event.nativeEvent;
    const tr = event.target.parentNode.parentNode;

tr.id便是该行的id.