Question

我有一个子组件。在此组件中，我尝试从父组件调用函数，并在此函数中传递参数：

子组件：

class CartItem extends Component {
    constructor() {
        super();
        this.state = {
            id: ''
        }
    }

   componentDidMount() {
        this.setState({ id: this.props.cartItem.Id })
    }

    deleteHandler = () => {
        this.props.deleteItem(this.state.id);
    }

    render() {
      return ( <button onClick={this.deleteHandler}>Delete</button>);
 }
}

父母的共同点：

class OrderStepTwoIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            deletedItemId: ''
        }
    }

  deleteItem = (id) => {
        debugger;
        this.setState(prevState => ({
            deletedItemId: { ...prevState.deletedItemId, id }
        }));
    }

  render() {
      return (
            {
              this.props.cartItems.map(function (item, key) {
                return <CartItem 
                            key={key} 
                            deleteItem={() => this.deleteItem()} 
                            cartItem={item} />
                                                })
            }
           );
    }
}

所以，现在我有一个错误：“无法读取未定义的属性'deleteItem'”

Answer 1

每当您在javascript中创建function时，它都会使用this创建一个作用域。比较起来，箭头函数始终从外部范围中提取this。

因此，请尝试在map回调中使用箭头功能：

this.props.cartItems.map((item, key) => (
    <CartItem 
        key={key} 
        deleteItem={() => this.deleteItem()} 
        cartItem={item} />
)

反应如何传递带有参数的函数作为道具？

1 个答案: