Question

为了简单起见，我提到了https://github.com/reactjs/redux/blob/master/examples/shopping-cart

上的反应示例购物车应用

在CartContiner的Container组件中，它有Cart组件。

场景：购物车有一个下拉控件（或任何控件），它使用this.setState（）方法更新本地状态（不是redux）。

问题：这个setState应该驻留在哪里？它应该转到容器还是应该保留在cart.js文件中。

如果您可以提供代码段，那就太棒了。

CartContainer.js：

＆＃13;

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { checkout } from '../actions'
import { getTotal, getCartProducts } from '../reducers'
import Cart from '../components/Cart'

const CartContainer = ({ products, total, checkout }) => (
  <Cart
    products={products}
    total={total}
    onCheckoutClicked={() => checkout(products)} />
)

CartContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    quantity: PropTypes.number.isRequired
  })).isRequired,
  total: PropTypes.string,
  checkout: PropTypes.func.isRequired
}

const mapStateToProps = (state) => ({
  products: getCartProducts(state),
  total: getTotal(state)
})

export default connect(
  mapStateToProps,
  { checkout }
)(CartContainer)

＆＃13;

cart.js

＆＃13;

import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'

const Cart  = ({ products, total, onCheckoutClicked }) => {
  const hasProducts = products.length > 0
  const nodes = hasProducts ? (
    products.map(product =>
      <Product
        title={product.title}
        price={product.price}
        quantity={product.quantity}
        key={product.id}
      />
    )
  ) : (
    <em>Please add some products to cart.</em>
  )

  return (
    <div>
      <h3>Your Cart</h3>
      <div>{nodes}</div>
      <p>Total: &#36;{total}</p>
      <button onClick={onCheckoutClicked}
        disabled={hasProducts ? '' : 'disabled'}>
        Checkout
      </button>
    </div>
  )
}

Cart.propTypes = {
  products: PropTypes.array,
  total: PropTypes.string,
  onCheckoutClicked: PropTypes.func
}

export default Cart

＆＃13;

Answer 1

我做了按钮控制来改变内部状态。我做了什么：

转换为类组件（React.Component） - 将整个主体移动到render（）{...}，并使用this.props.propertyname
使用构造函数和toggleState方法。
按钮onClick分配toggleState（）

对于代码格式和可能的错误感到抱歉。询问是否不清楚。

Cart.js

import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'

class Cart  extends React.Component {
  constructor() {
     super();
     this.state = {on: false};
     this.toggleState = this.toggleState.bind(this);
  }

  toggleState() {
     this.setState({on: !this.state.on});
     // you can use this.props even here
     // this.props.onCheckoutClicked();
  }

  render () {

    const hasProducts = this.props.products.length > 0
    const nodes = hasProducts ? (
    products.map(product =>
      <Product
        title={product.title}
        price={product.price}
        quantity={product.quantity}
        key={product.id}
      />
    )
    ) : (
     <em>Please add some products to cart.</em>
    )
    return (
    <div>
      <h3>Your Cart</h3>
      <div>{nodes}</div>
      <p>Total: &#36;{this.props.total}</p>
      <button onClick={this.toggleState} //{this.props.onCheckoutClicked}
        disabled={hasProducts ? '' : 'disabled'}>
        Checkout
      </button>
    </div>
  )
 }
}

Cart.propTypes = {
  products: PropTypes.array,
  total: PropTypes.string,
  onCheckoutClicked: PropTypes.func
}

export default Cart

你可以在这里找到类似的例子： https://facebook.github.io/react/docs/handling-events.html

容器组件中的本地状态

1 个答案: