javascript - react 。如何传递带有参数作为 prop 的函数？

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} />
)