एरे

Question

में आइटम को प्रतिस्थापित करें मैं अपने सरणी में किसी अन्य आइटम के साथ एक आइटम को प्रतिस्थापित करने की कोशिश कर रहा हूं, मेरे पास प्लेसहोल्डर है जिस पर एक संख्या है, और जब मैं जोड़ने पर क्लिक करता हूं तो पहला आइटम पहली स्थिति में जाना चाहिए, दूसरी स्थिति दूसरी स्थिति में और इसी तरह।

फिलहाल यह उस स्थिति को जोड़ देगा जब क्लिक किया गया था, जो व्यवहार मैं नहीं चाहता हूं।

यदि मैं नंबर स्थिति प्लेसहोल्डर को हटा देता हूं तो मैं उन्हें सही स्थिति में सरणी में जाने के लिए प्राप्त कर सकता हूं लेकिन मैं प्लेसहोल्डर के साथ काम करने में असमर्थ हूं।

सरणी में संख्या स्थिति को प्रतिस्थापित करने पर क्लिक किए जाने पर उत्पाद आइटम कैसे प्राप्त किया जा सकता है?

https://codesandbox.io/s/6z48qx8vmz

Hello.js

import React from 'react'; 
import update from 'immutability-helper' 
import styled from 'styled-components' 
import Product from './Product' 

const NumberWrap = styled.div` 
    display: flex; 
    flex-wrap:wrap 
    border: 1px solid #ccc; 
    flex-direction: row; 
` 

const Numbers = styled.div` 
    display:flex; 
    background: #fafafa; 
    color: #808080; 
    font-size: 32px; 
    flex: 0 0 20%; 
    min-height: 200px; 
    justify-content: center; 
    align-items:center; 
    border-right: 1px solid #ccc; 
` 

const CardWrap = styled.div` 
    display:flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    margin-top: 20px; 
` 

export default class Hello extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     placeholder: [1,2,3,4,5], 
     data: [ 
     { id: 1, header: 'Item 1'}, 
     { id: 2, header: 'Item 2'}, 
     { id: 3, header: 'Item 3'}, 
     { id: 4, header: 'Item 4'} 
     ], 
     addedItems: [], 
    } 
    this.handleAdd.bind(this) 
    this.handleRemove.bind(this) 
    } 

    handleAdd(id) { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     $push: [ 
      id, 
     ], 
     }) 
    }) 
    } 

    handleRemove(index) { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     $splice: [ 
      [index, 1] 
     ], 
     }) 
    }) 
    } 

    render() { 
    return(
     <div> 
     <NumberWrap> 
      { 
      this.state.placeholder.map(item => 
      <Numbers>{item} 
      { 
       this.state.data.filter(item => 
       this.state.addedItems.indexOf(item.id) !== -1).slice(0, 5).map(item => 
       <Product {...item} remove={this.handleRemove} /> 
      ) 
      } 
      </Numbers> 
     )} 
     </NumberWrap> 


     <CardWrap> 
     { 
      this.state.data.map(item => 
      <Product {...item} add={()=>this.handleAdd(item.id)} /> 
     )} 
     </CardWrap> 
     </div> 
    ) 
    } 
} 

Product.js

import React from "react"; 
import styled from "styled-components"; 

const Card = styled.div` 
    flex: 0 0 20%; 
    border: 1px solid #ccc; 
`; 

const Header = styled.div` 
    padding: 20px; 
`; 

const AddBtn = styled.button` 
    width:100%; 
    height: 45px; 
`; 

const Product = props => { 
    const { add, id, header, remove } = props; 
    return (
    <Card> 
     <Header key={id}> 
     {header} 
     </Header> 
     <AddBtn onClick={add}>Add</AddBtn> 
     <AddBtn onClick={remove}>Remove</AddBtn> 
    </Card> 
); 
}; 

export default Product; 

Answer 1

मैं थोड़ा कठिन समय प्रश्न को समझने के लिए किया था, लेकिन यह है कि तुम क्या https://codesandbox.io/s/vj7vxw198y चाहते हैं? यदि आप चाहते हैं तो इसे एक ही आइटम को कई बार जोड़ने की अनुमति देने के लिए अभी भी कुछ काम की आवश्यकता होगी।