使用react Js将数据添加到按钮单击的同一页中

Question

我们如何使用react在单击按钮时从同一页面的数组列表中列出数据？

当用户输入数量设定值文本框更改事件时

class ProductList extends Component {  
    constructor(props) {
        super(props);
        this.state={
            CartArray:[], 
        } 
    }

    handleInputChange = event => 
    { 
      const cart_values = event.target.name.split('-');
      let newCart = {};
      newCart["Key"]=cart_values[0]
      newCart["ProductName"]=cart_values[1]
      newCart["ProductBrand"]=cart_values[2]

      this.setState(prevState => ({CartArray: [...prevState.CartArray, newCart]}))
    }
    viewCart = () => {
       //What need to write here show data from CartArray:[] to my basket
    }
}

Answer 1

如果显示，您的意思是在屏幕上显示，而不是在viewCart内部，而是在单独的方法render()中

render(){
        return(
                <div>
                {
                    this.state.CartArray.map((product) => {
                     <p>Key: {product.Key} </p>
                     <p>ProductName: {product.ProductName} </p>
                     <p>ProductBrand: {product.ProductBrand} </p>
                    })
                }
                </div>          
            );    
    }