無法讀取屬性「綁定」的未定義

Question

我正在嘗試創建一個購物車，在此我試圖通過在購物車中添加一個添加按鈕來調用ajax發佈功能。在我的購物車功能，下面的代碼，如果我刪除onclinck功能

onClick={ this.createNeworder.bind(this, this.orderid, this.item.product_code)}> Add </a> </span> , 

的這條線或添加只是一個簡單的按鈕，它顯示了車中的物品和按鈕。但是如果我添加這行代碼，那麼它會給出錯誤Cannot read property 'bind' of undefined，並且不要在購物車中添加任何項目。我在其他頁面代碼中使用了相同的onclick函數，它正在工作，但我不知道它爲什麼不在這裏工作。

var orderid = document.getElementById('bizorderid').innerHTML; 
console.log(orderid); 

function testAjax() { 
return $.ajax({ 
      type: 'GET', 
      url: "/restaurant/menu/list/100/1", 
      headers: { 
            Accept : "application/json", 
               "Content-Type": "application/json" 
        }, 
      async : false 
      }).done(function(json) { 
        //tata = json; 

//      console.log(json); 
        return json; 
      }).responseText; 

      } 

    var dt = testAjax(); 
    var productsCollection = JSON.parse(dt); 
    //var promise = $.parseJSON(pt); 
    console.log(productsCollection) 

/** @jsx React.DOM */ 

var Product = React.createClass({ 
getInitialState: function() { 
    return { 
    added: false 
    }; 
}, 

addToCart: function(e) { 
    if(!this.state.added) { 
    // add 
    $.publish('cart.added', this.props.data); 
    } 
    else { 
    // remove 
    $.publish('cart.removed', this.props.data.id); 
    } 

    this.setState({ 
    added: !this.state.added 
    }); 
}, 

render: function() { 
    // assign to props 
    var data = this.props.data; 

return (
     <div className="card"> 
     <div className="title"> 
      <h3><a>{data.product_name}</a></h3> </div> 
      <div className="content">Price :{data.price} <br />category : {data.groupid} <br /> 
        Units: {data.unit} <br /> Code : {data.product_code} <br /> 
      <button className={this.state.added ? 'button success' : 'button small radius'} onClick={this.addToCart}> 
       {this.state.added ? 'Remove' : 'Add to cart'} 
      </button> 
     </div> 
      </div> 
     ); 
     } 
    }); 


    /** @jsx React.DOM */ 

    var ProductsList = React.createClass({ 
     render: function() { 

      var products = this.props.data.map(function(product) { 
       return (
       <li key={product.product_code}> 
        <Product data={product} /> 
       </li> 
      ) 
      }); 

      return (
      <ul className="clearfix"> 
       {products} 
      </ul> 
     ); 
     } 
    }); 

    var Cart = React.createClass({ 

    createNeworder: function(orderid, product_code) { 
             //var tbn = this.iid; 
            // var tbn = iid; 
           var o_id = orderid; 
           console.log(o_id); 
           var p_code = product_code; 
           var unit = 1; 
             $.ajax({ 
               url: '/restaurant/order/product/'+o_id+'/'+p_code+'/'+unit, 
               type: 'POST', 
               headers: { 
                  // Accept : "application/json", 
                  "Content-Type": "application/json" 
                  }, 

               success: function(data) { 
    //            console.log(data.orderid); 
                var orderid = data.orderid; 
                console.log(orderid); 

               // window.location = '/diner/orderdiner/'+orderid; 

                this.setState({data: data}); 
                 }.bind(this), 
               error: function(xhr, status, err) { 
             // console.error(this.props.url, status, err.toString()); 
                 }.bind(this) 
                 }); 
            }, 


    getInitialState: function() { 
     // also subscribe to product events here 
     $.subscribe('cart.added', this.addItem); 
     $.subscribe('cart.removed', this.removeItem); 

     return { 
      items: [], 
      total: 0, 
      currency: 'EUR' 
     }; 
     }, 

     addItem: function(e, item) { 
     this.state.items.push(item); 
     this.forceUpdate(); 

     this.countTotal(); 
     }, 

     removeItem: function(e, itemId) { 
     var itemIndexInArray; 

     this.state.items.some(function(item, index) { 
      if(item.id === itemId) { 
      itemIndexInArray = index; 
      return true; 
      } 
     }); 

     this.state.items.splice(itemIndexInArray, 1); 
     this.forceUpdate(); 

     this.countTotal(); 
     }, 

    countTotal: function() { 
     var total = 0; 

     this.state.items.forEach(function(item, index) { 
      total += item.price; 
     }); 

     this.setState({ 
      total: total 
     }) 
     }, 

     render: function() { 

      var items = this.state.items.map(function(item) { 
      //  var pro_code = {item.product_code} ; 
    //    console.log(pro_code); 
       return (
       <li key={item.id} className="cart-item"> 
        <span className="cart-item__name">{item.product_name}</span> 
        <span className="cart-item__price">{item.price} {item.currency}</span> 
        <span hidden className="cart-item__price">{item.product_code} {item.currency}</span> 
      <span > <a onClick={ this.createNeworder.bind(this, this.orderid, this.item.product_code)} > Add </a> </span> 
       </li> 
      ) 
      }); 

      var body = (
      <ul> 
       {items} 
      </ul> 
     ); 

      var empty = <div className="alert alert-info">Cart is empty</div>; 

      return (
      <div className="panel panel-default"> 
       <div className="panel-body"> 
       {items.length > 0 ? body : empty} 
       </div> 
      </div> 
     ); 
     } 
    }); 


    React.render(<ProductsList data={productsCollection} />, document.getElementById('tabmenu')); 
     React.render(<Cart />, document.getElementById('cart')); 

Answer 1

React允許您將數據從子組件傳回到其父組件。我們通過向孩子傳遞一個新的回調（一些自定義回調），將其綁定到孩子的（點擊/任何其他）事件，在父母的渲染方法中做到這一點。每當事件被觸發時，回調就會被調用。

我看到你的一個onclick關聯的回調，因此你需要用整個items陣列是map通過執行類似

this.state.items.map(function(item) { 
return (
    // binding of child's event 
)}.bind(this); 

其中this將是你cart實例結果類

來源：React Documentation