在树上解除共享状态

我在尝试构建一个小的React应用程序，当用户选择肉制品时，用户界面将显示来自json数据文件的肉类。我有一个Products类作为类ProductCategoryRow和SelectProduct函数的父类。我对如何在Products类中设置状态并将道具传递给ProductCategoryRow和SelectProduct有点困惑。在树上解除共享状态

function SelectProduct (props) { 
const products = ['All', 'Beef', 'Lamb', 'Poultry']; 
return (
<ul className='products'> 
{products.map(function (prod) { 
    return (
     <li 
     style={prod === props.selectedProduct ? { color: '#d0021b' }:null} 
       onClick={props.onSelect.bind(null, prod)} 
       key={prod}> 
       {prod} 
      </li> 
     ) 
    })} 
</ul> 
)}; 

class ProductCategoryRow extends React.Component { 
constructor(props) { 
super(props); 

this.state = { 
    list: list, 
}; 
this.onDismiss = this.onDismiss.bind(this); 
} 

onDismiss(id) { 
    const isNotId = item => item.objectID !== id; 
    const updatedList = this.state.list.filter(isNotId); 
    this.setState({ list: updatedList }); 
} 

render() { 
    return (
     <div className="container"> 
      { this.state.list.map(item => 
      <div key={item.objectID} className="product-category-row"> 
         <div>{item.category}</div> 
         <div>{item.meatCut}</div> 
         <div>{item.cooking}</div> 
         <div>{item.price}</div> 
         <div> 
          <button 
          onClick={() => this.onDismiss(item.objectID)} 
          type="button" 
          > 
          Dismiss 
          </button> 
         </div> 
       </div> 
      )} 
     </div> 
    ) 
} 
} 

SelectProduct.propTypes = { 
selectedProduct: PropTypes.string.isRequired, 
onSelect: PropTypes.func.isRequired, 
} 

class Products extends React.Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     selectedProduct: 'All', 
     lists: null 
    }; 
    this.updateProduct = this.updateProduct.bind(this); 
} 

componentDidMount() { 
    this.updateProduct(this.state.selectedProduct); 
} 

updateProduct(prod) { 
    this.setState(function() { 
     return { 
      selectedProduct: prod, 
      lists: null 
     } 
    }) 
} 

render() { 
    return (
     <div> 
      <SelectProduct 
      selectedProduct={this.state.selectedProduct} 
      onSelect={this.updateProduct} 
      /> 
      <ProductCategoryRow /> 
     </div> 
    ) 
} 
} 

export default Products;

在此先感谢

来源

2017-06-06 BigNom

看起来你已经拥有的UpdateProduct与'SelectProduct'传回了'prod'更新您的状态。您需要将'selectedProduct = {this.state.selectedProduct}'作为道具添加到'ProductCategoryRow'中，并且您应该可以访问所选产品。或者我错过了什么？ –

感谢您的帮助，不幸的是我在理解如何将一个道具传递给另一个组件时有点麻烦。您能否告诉我确切地在哪里通过它。 – BigNom

在选择产品时，您已经更新您的父组件的状态，所以这是好！现在，你需要在this.state.selectedProduct传递给ProductCategoryRow组件作为selectedProduct道具在你的渲染方法：

function SelectProduct (props) { 
const products = ['All', 'Beef', 'Lamb', 'Poultry']; 
return (
<ul className='products'> 
{products.map(function (prod) { 
    return (
     <li 
     style={prod === props.selectedProduct ? { color: '#d0021b' }:null} 
       onClick={props.onSelect.bind(null, prod)} 
       key={prod}> 
       {prod} 
      </li> 
     ) 
    })} 
</ul> 
)}; 

class ProductCategoryRow extends React.Component { 
constructor(props) { 
super(props); 

this.state = { 
    list: list, 
}; 
this.onDismiss = this.onDismiss.bind(this); 
} 

onDismiss(id) { 
    const isNotId = item => item.objectID !== id; 
    const updatedList = this.state.list.filter(isNotId); 
    this.setState({ list: updatedList }); 
} 

render() { 
    return (
     <div className="container"> 
      { this.state.list.map(item => 
      <div key={item.objectID} className="product-category-row"> 
         <div>{item.category}</div> 
         <div>{item.meatCut}</div> 
         <div>{item.cooking}</div> 
         <div>{item.price}</div> 
         <div> 
          <button 
          onClick={() => this.onDismiss(item.objectID)} 
          type="button" 
          > 
          Dismiss 
          </button> 
         </div> 
       </div> 
      )} 
     </div> 
    ) 
} 
} 

SelectProduct.propTypes = { 
selectedProduct: PropTypes.string.isRequired, 
onSelect: PropTypes.func.isRequired, 
} 

class Products extends React.Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     selectedProduct: 'All', 
     lists: null 
    }; 
    this.updateProduct = this.updateProduct.bind(this); 
} 

componentDidMount() { 
    this.updateProduct(this.state.selectedProduct); 
} 

updateProduct(prod) { 
    this.setState(function() { 
     return { 
      selectedProduct: prod, 
      lists: null 
     } 
    }) 
} 

render() { 
    return (
     <div> 
      <SelectProduct 
      selectedProduct={this.state.selectedProduct} 
      onSelect={this.updateProduct} 
      /> 
      <ProductCategoryRow selectedProduct={this.state.selectedProduct} /> 
     </div> 
    ) 
} 
} 

export default Products;

来源

2017-06-07 14:50:19

如何获取onSelect = {this.updateProduct}以仅显示与ProductCategoryRow中的{item.category}匹配的项目 – BigNom

在树上解除共享状态

回答

相关问题