javascript - React : When the user interacts with the checkbox control, 项目的状态应从 NEW 更新为 RESERVED

Question

ProductList 组件有一个子组件 ProductRow ，需要发生的就是当我单击 ProductRow 组件内的复选框时，复选框应从 NEW 更改为 RESERVED(由 props 传递)。

仅仅因为这个我就必须使用 redux 吗？

更多上下文ProductList是ShoppingCart组件的子组件，如下所示:

const ShoppingCart = React.createClass({
  propTypes: {
    shoppingCartData: PropTypes.object.isRequired
  },

  render () {
    const {assignee, customer, status, assignedAt, items, placedAt} = this.props.shoppingCartData.data

    return (
      <div>
        <Header assignee={assignee} />
        <PersonalInfo customer={customer} assignedAt={assignedAt} />
        <CartStatus status={status} customer={customer} placedAt={placedAt} />
        <ProductList items={items} />
      </div>
    )
  }
})
export default ShoppingCart

产品列表.js

    const ProductList = React.createClass({

      propTypes: {
        items: PropTypes.array.isRequired
      },

      handleProductCheckBoxClick (e) {
        console.log('handleChange', e.target.value)
      },

      render () {
        const {items} = this.props
        const handleProductCheckBoxClick = this.handleProductCheckBoxClick

        return (
          <div>
            {
              items.map((item) => {
                return (
                  <ProductRow key={item.id} onChange={handleProductCheckBoxClick} item={item} />
                )
              })
            }
          </div>
        )
      }
    })

ProductRow.js

const ProductRow = React.createClass({
  propTypes: {
    item: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired
  },

  render () {
    const { code, name, imageUrl, description } = this.props.item.product
    const {status} = this.props.item
    const {onChange} = this.props
    return (
      <div>
        <label htmlFor={code}>
          <input type='checkbox' id={code} onChange={onChange} value={status} />
          <img src={imageUrl} />
          <div className='name'>{name}</div>
          <div className='description'>{description}</div>
        </label>
      </div>
    )
  }
})

购物车数据

{
   "data":{
      "id":"0335c8ed-3b41-4bc0-9fc5-adbaeeba6ed2",
      "productGroup":"7307",
      "status":"INPROGRESS",
      "assignee":{
         "id":"9018418",
         "name":"Mark"
      },
      "items":[
          {
             "id":25,
             "sequence":1,
             "status":"NEW",
             "quantity":1,
             "product":{
                "code":"730719067100000",
                "name":"Boltaart Bosbessen",
                "description":"Overheerlijke Boltaart met Bosbessen uit de keuken van de Bijenkorf.",
                "price":17.95,
                "imageUrl":"//placehold.it/57/ffffff/000000"
             }
         },
         {
            "id":26,
            "sequence":1,
            "status":"NEW",
            "quantity":1,
            "product":{
               "code":"730719067300000",
               "name":"Aarbeien Boltaart",
               "description":"Biscuitdeeg met aardbeienbavaroise, afgemaakt met aardbeiengelei en chocoladegalletjes.",
               "price":17.95,
               "imageUrl":"//placehold.it/57/ffffff/000000"
            }
        },
        {
           "id":27,
           "sequence":1,
           "status":"NEW",
           "quantity":1,
           "product":{
              "code":"730719067200000",
              "name":"Truffel Boltaart",
              "description":"Chocolade mousse en biscuitdeeg gevuld met koffierumsaus en feuilletine, overgoten met pure chocoladegelei en gegarneerd met een krul van pure chocolade en chocoladegalletjes.",
              "price":17.95,
              "imageUrl":"//placehold.it/57/ffffff/000000"
           }
        }
      ],
      "assigned":true,
      "assignedAt":"2016-05-25 10:30",
      "orderId":"36480157_CKS_N01",
      "customer":{
         "id":"00005152",
         "email":"alan.form@email.nl",
         "name":"Alan Ford",
         "phoneNumber":"+31123456789"
      },
      "placedAt":"2016-05-24 09:00",
      "numberOfItems":3
   }
}

Answer 1

您可以做的是将从父级获得的 Prop 分​​配为组件的状态。并且，在渲染函数中使用该状态。当你更新组件的状态时，组件也会更新。

但是，请记住，将 props 分配给状态被认为是反模式:https://stackoverflow.com/a/28785276/1553053

我的建议是开始使用 Redux 或 Alt。 Alt 相当容易上手。它们将允许您处理应用程序范围的状态，并且可以以更容易和更好的方式处理这种情况。