Javascript ReactJS：在这种情况下绑定是如何工作的？_Javascript_Reactjs

Javascript ReactJS：在这种情况下绑定是如何工作的？

javascript reactjs

Javascript ReactJS：在这种情况下绑定是如何工作的？,javascript,reactjs,Javascript,Reactjs,我目前正在建设一个电子商务网站，具有“添加到购物车”功能，我在购物车类中工作。我正在使用Redux——当有一个Delete按钮，我可以通过单击（调用onClick）从当前购物车状态中删除一本书时，使用onDelete函数这是我一直在尝试的，但它不起作用并抛出错误：“TypeError:无法读取未定义的属性'onClick' 您可以看到，我已将其传递给构造函数中的onClick函数，因此在按钮的onClick属性中，我只是将cartID传递给onClick函数： Cart.js文件 class

我目前正在建设一个电子商务网站，具有“添加到购物车”功能，我在购物车类中工作。我正在使用Redux——当有一个Delete按钮，我可以通过单击（调用onClick）从当前购物车状态中删除一本书时，使用onDelete函数

这是我一直在尝试的，但它不起作用并抛出错误：“TypeError:无法读取未定义的属性'onClick'

您可以看到，我已将其传递给构造函数中的onClick函数，因此在按钮的onClick属性中，我只是将cartID传递给onClick函数：

Cart.js文件

class Cart extends React.Component {
    constructor() {
        super();
        this.onClick = this.onDelete.bind(this);
    }

    onDelete(_id) {
    //
    }

    render() {
        // if more than 1 item in cart array, then render the cart
        // otherwise, render empty
        if(this.props.cart[0]) {
            return this.renderCart();
        } else {
            return this.renderEmpty();
        }       
    }

    renderEmpty() {
        return (<div>Empty Cart</div>)
    }

    renderCart() {
        
        const cartItemsList = this.props.cart.map(function(cartArr) {
            return (
                <Card key={cartArr._id}>
                    <Row>
                        <Col>
                            <h6>{cartArr.title}</h6>
                        </Col>
                        <Col>
                            <h6>USD {cartArr.price}</h6>
                        </Col>
                        <Col>
                            <h6>qty. goes here</h6>
                        </Col>
                        <Col>
                            <ButtonGroup style={{minWidth:'300px'}}>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    -
                                </Button>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    +
                                </Button>
                                <span>     </span>
                                <Button
                                    onClick = {this.onClick(cartArr._id)}
                                    variant = "danger"
                                    size    = "small">
                                    DELETE
                                </Button>
                            </ButtonGroup>
                        </Col>
                    </Row>
                </Card>
            )
        })

        return (
            <Card>
                {cartItemsList}
            </Card>
        )
    }
}

class Cart extends React.Component {
    constructor() {
        super();
        this.onClick = this.onDelete.bind(this);
    }

    onDelete(_id) {
    //
    }

    render() {
        // if more than 1 item in cart array, then render the cart
        // otherwise, render empty
        if(this.props.cart[0]) {
            return this.renderCart();
        } else {
            return this.renderEmpty();
        }       
    }

    renderEmpty() {
        return (<div>Empty Cart</div>)
    }

    renderCart() {
        
        const cartItemsList = this.props.cart.map(function(cartArr) {
            return (
                <Card key={cartArr._id}>
                    <Row>
                        <Col>
                            <h6>{cartArr.title}</h6>
                        </Col>
                        <Col>
                            <h6>USD {cartArr.price}</h6>
                        </Col>
                        <Col>
                            <h6>qty. goes here</h6>
                        </Col>
                        <Col>
                            <ButtonGroup style={{minWidth:'300px'}}>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    -
                                </Button>
                                <Button
                                    variant = "default"
                                    size    = "small">
                                    +
                                </Button>
                                <span>     </span>
                                <Button
                                    onClick = {this.onClick(cartArr._id)}
                                    variant = "danger"
                                    size    = "small">
                                    DELETE
                                </Button>
                            </ButtonGroup>
                        </Col>
                    </Row>
                </Card>
            )
        })

        return (
            <Card>
                {cartItemsList}
            </Card>
        )
    }
}

类购物车扩展了React.Component{
构造函数（）{
超级（）；
this.onClick=this.onDelete.bind（this）；
}
onDelete（\u id）{
//
}
render（）{
//如果购物车数组中有多个项目，则渲染购物车
//否则，渲染为空
如果（此.props.cart[0]）{
返回此.renderCart（）；
}否则{
返回此.renderEmpty（）；
}       
}
renderEmpty（）{
退货（空车）
}
renderCart（）{
const cartimeslist=this.props.cart.map（函数（cartArr）{
返回(
{cartArr.title}
美元{cartArr.price}
数量在这里
-
+
删去
)
})
返回(
{cartItemsList}
)
}
}

我知道这其中的一部分是由于我传递给onClick函数的这个关键字的性质。当我遵循教程并在cartItemList的末尾添加this关键字时，效果很好：

类购物车扩展了React.Component{
构造函数（）{
超级（）；
this.onClick=this.onDelete.bind（this）；
}
onDelete（\u id）{
//
}
render（）{
//如果购物车数组中有多个项目，则渲染购物车
//否则，渲染为空
如果（此.props.cart[0]）{
返回此.renderCart（）；
}否则{
返回此.renderEmpty（）；
}       
}
renderEmpty（）{
退货（空车）
}
renderCart（）{
const cartimeslist=this.props.cart.map（函数（cartArr）{
返回(
{cartArr.title}
美元{cartArr.price}
数量在这里
-
+
删去
)
})
返回(
{cartItemsList}
)
}
}

把这行改成

 onClick = {() => this.onClick(cartArr._id)}

用你的语法

onClick = {this.onClick(cartArr._id)}

函数会立即被调用，而不是单击

你需要

onClick = {() => this.onClick(cartArr._id)}

相反

无论如何，使用现代ES，不需要手动绑定东西；改用箭头函数

下面是我如何编写您的组件（如果它必须是类组件，而不是函数组件）：

类购物车扩展了React.Component{
//箭头函数是自动绑定的
onDelete=（\u id）=>{
const{cart}=this.props；
const cartWithoutGivenId=cart.filter（（项目）=>item.\u id！==u id）；
const cartAfterDelete={books:cartWithoutGivenId}；
this.props.deleteFromCart（cartAfterDelete）；
};
render（）{
const{cart}=this.props；
如果（！购物车长度）{
归还空车；
}
const cartItemsList=cart.map（（项目）=>(
{item.title}
美元{项目价格}
数量在这里
-
+
this.onDelete（item.\u id）}
variant=“危险”
size=“小”
>
删去
));
返回{cartItemsList}；
}
}

编辑为了完整起见，这里有一对功能组件：

const CartItem = ({ item, onDelete }) => (
  <Card>
    <Row>
      <Col>
        <h6>{item.title}</h6>
      </Col>
      <Col>
        <h6>USD {item.price}</h6>
      </Col>
      <Col>
        <h6>qty. goes here</h6>
      </Col>
      <Col>
        <ButtonGroup style={{ minWidth: "300px" }}>
          <Button variant="default" size="small">
            -
          </Button>
          <Button variant="default" size="small">
            +
          </Button>
          <Button
            onClick={() => onDelete(item._id)}
            variant="danger"
            size="small"
          >
            DELETE
          </Button>
        </ButtonGroup>
      </Col>
    </Row>
  </Card>
);

const Cart = ({ cart, deleteFromCart }) => {
  const onDelete = React.useCallback(
    (_id) => {
      const cartWithoutGivenId = cart.filter((item) => item._id !== _id);
      const cartAfterDelete = { books: cartWithoutGivenId };
      deleteFromCart(cartAfterDelete);
    },
    [cart],
  );

  if (!cart.length) {
    return <div>Empty Cart</div>;
  }

  return (
    <Card>
      {cart.map((item) => (
        <CartItem key={item._id} item={item} onDelete={onDelete} />
      ))}
    </Card>
  );
};

const cartime=（{item，onDelete}）=>(
{item.title}
美元{项目价格}
数量在这里
-
+
onDelete（项目编号）}
variant=“危险”
size=“小”
>
删去
);
const Cart=（{Cart，deleteFromCart}）=>{
const onDelete=React.useCallback(
（_id）=>{
const cartWithoutGivenId=cart.filte
class Cart extends React.Component {
  // Arrow functions are automagically bound
  onDelete = (_id) => {
    const { cart } = this.props;
    const cartWithoutGivenId = cart.filter((item) => item._id !== _id);
    const cartAfterDelete = { books: cartWithoutGivenId };
    this.props.deleteFromCart(cartAfterDelete);
  };

  render() {
    const { cart } = this.props;
    if (!cart.length) {
      return <div>Empty Cart</div>;
    }

    const cartItemsList = cart.map((item) => (
      <Card key={item._id}>
        <Row>
          <Col>
            <h6>{item.title}</h6>
          </Col>
          <Col>
            <h6>USD {item.price}</h6>
          </Col>
          <Col>
            <h6>qty. goes here</h6>
          </Col>
          <Col>
            <ButtonGroup style={{ minWidth: "300px" }}>
              <Button variant="default" size="small">
                -
              </Button>
              <Button variant="default" size="small">
                +
              </Button>
              <Button
                onClick={() => this.onDelete(item._id)}
                variant="danger"
                size="small"
              >
                DELETE
              </Button>
            </ButtonGroup>
          </Col>
        </Row>
      </Card>
    ));

    return <Card>{cartItemsList}</Card>;
  }
}

const CartItem = ({ item, onDelete }) => (
  <Card>
    <Row>
      <Col>
        <h6>{item.title}</h6>
      </Col>
      <Col>
        <h6>USD {item.price}</h6>
      </Col>
      <Col>
        <h6>qty. goes here</h6>
      </Col>
      <Col>
        <ButtonGroup style={{ minWidth: "300px" }}>
          <Button variant="default" size="small">
            -
          </Button>
          <Button variant="default" size="small">
            +
          </Button>
          <Button
            onClick={() => onDelete(item._id)}
            variant="danger"
            size="small"
          >
            DELETE
          </Button>
        </ButtonGroup>
      </Col>
    </Row>
  </Card>
);

const Cart = ({ cart, deleteFromCart }) => {
  const onDelete = React.useCallback(
    (_id) => {
      const cartWithoutGivenId = cart.filter((item) => item._id !== _id);
      const cartAfterDelete = { books: cartWithoutGivenId };
      deleteFromCart(cartAfterDelete);
    },
    [cart],
  );

  if (!cart.length) {
    return <div>Empty Cart</div>;
  }

  return (
    <Card>
      {cart.map((item) => (
        <CartItem key={item._id} item={item} onDelete={onDelete} />
      ))}
    </Card>
  );
};

onDelete(id) {
    return function() {
         //On delete logic
    }
}