javascript - 将状态传递到 Ajax 调用 ReactJS 和 Rails

Question

我有一个 ProductItem 组件，当用户单击“添加到购物篮”时，该组件会执行 AJAX post 调用来创建购物篮项目。

但是，我目前似乎无法将状态传递到 Ajax 调用中，因此它缺少所需的动态数据。

当我在 Chrome 上 checkin React 开发人员工具时，组件看起来像这样，并且状态在产品项组件上设置正确。

class ProductItem extends React.Component{

constructor() {
    super()

    this.state = { 
        name: '',
        price: 0,
        code: '',
        id: ''
    }
}

componentWillMount() {
    this.setState( {
        name: this.props.data.name,
        price: this.props.data.price,
        code: this.props.data.code,
        id: this.props.data.id
    })
}

addtoBasket(props) {
    console.log(props.name) /* RETURNS UNDEFINED */
    $.ajax({
        type: "POST",
        url: "/items",
        dataType: "json",
        data: {
            item: {
                name: 'Trousers',
                price: 52.00,
                code: 'T01'
            }
        },
        success: function() {

            console.log("success");
        },
        error: function () {
            console.log("error");
        }
    })
}

render(){
    let productName = this.props.data.name
    let productPrice = this.props.data.price
    let productCode = this.props.data.code
    let productImg = this.props.data.image_url

    return (
        <div className="col-xs-12 col-sm-4 product">
            <img src={productImg}/>
            <h3 className="text-center">{productName}</h3>
            <h5 className="text-center">£{productPrice}</h5>
            <div className="text-center">
                <button onClick={this.addtoBasket.bind(this.props)} className="btn btn-primary">Add to Basket</button>
            </div>
        </div>
    )
}

}

如何解决此问题并正确地将状态或 Prop 传递给调用？

Answer 1

将按钮更改为以下代码

<button onClick={this.addtoBasket.bind(this)} className="btn btn-primary">Add to Basket</button>

然后您将能够了解其上下文。

或者其他方式

 <button onClick={this.addtoBasket.bind(this , this.props)} className="btn btn-primary">Add to Basket</button>

并在addtoBasket方法中

addtoBasket(props){
  console.log("Prrops" , props)
}

这应该有效:)