Not being able to pass props from a parent component to a child component

I need to pass props to a child component Product but i don't know what i'm missing here.

Parent Component:

var Products = React.createClass({
  getInitialState: function(){..},
  deleteProduct: function(){..},
  updateProduct: function(){..},
  render: function(){
    var products = _.map(this.state.products, function(product){
      return(
        <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/>
      )
    });
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Quantity</th>
          <th>Price</th>
          <th colSpan="4">Actions</th>
        </tr>
      </thead>
      <tbody>
        {products}
      </tbody>
    </table>
  )
}
});

Child Component:

var Product = React.createClass({
 console.log(this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined
 handleEdit: function() {
  e.preventDefault();
  data = {..};
  $.ajax({
    ..,
    success: (function(_this) {
      console.log(_this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined
      return function(data) {
        _this.setState({
          edit: false
         });
        return _this.props.handleEditProduct(_this.props.product, data);
      };
    })(this)
  });
 }
});

I'm able to use key and product as a props inside the component but not this.props.handleDeleteProduct and this.props.handleEditProduct . I think may be i'm using the props inside the success callback of the $.ajax and then may be some thing related to async request. Not sure.

The error i'm getting is

Uncaught TypeError: _this.props.handleEditProduct is not a function

I'm not sure what i'm doing wrong here. I tried to loop directly in between <tbody> but still no luck. Also here i'm calling the functions like this.deleteProduct as a reference but not by function call. And if i do by calling by function then it is reporting execjs error.

I took this as a reference for looping inside JSX : loop inside React JSX

But no luck. Please help.

---

You are passing handleEditProduct={this.editProduct} , when the function is called updateProduct in your parent component. Change it to handleEditProduct={this.updateProduct} and I'll bet it works

EDIT:

Since that didn't work, I looked a little harder and I think I see what the problem is. I'm fairly sure that _ doesn't autobind this like React.createClass does. So when you map over your products here:

var products = _.map(this.state.products, function(product){
      return(
        <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/>
      )
    });

this is not set to your react element. Try keeping a reference to this before you map , explicitly bind this to your map function, or use ES6 arrow functions: https://babeljs.io/docs/learn-es2015/#arrows-and-lexical-this. The simplest way to achieve what you want would be to save this in a variable:

var self = this;
var products = _.map(this.state.products, function(product){
          return(
            <Product key={product.id} product={product} handleDeleteProduct={self.deleteProduct} handleEditProduct={self.editProduct} formData={self.props.formData}/>
          )
        });

You can also use bind to achieve the same effect: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

链接地址: http://www.djcxy.com/p/52150.html

上一篇: 如何访问DOM事件

下一篇: 无法将道具从父组件传递给子组件