Phản hồi thay thế mục trong mảng

Question

Tôi đang cố gắng thay thế một mục trong mảng của mình bằng một mục khác, tôi có một trình giữ chỗ có vị trí số trên đó và khi tôi nhấp vào thêm mục đầu tiên sẽ vào vị trí thứ nhất, Mục thứ 2 vào vị trí thứ 2 và cứ tiếp tục như vậy.

Hiện tại, nó sẽ thêm mục ở tất cả các vị trí khi được nhấp vào, đó không phải là hành vi tôi muốn.

Nếu tôi xóa trình giữ chỗ vị trí số, tôi có thể đưa chúng vào mảng ở đúng vị trí nhưng tôi không thể làm cho nó hoạt động với trình giữ chỗ.

Làm cách nào để có được mục sản phẩm khi được nhấp vào thay thế vị trí số trong mảng?

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

Tôi có thời gian chút khó khăn để hiểu câu hỏi nhưng là những gì bạn muốn https://codesandbox.io/s/vj7vxw198y? Nó vẫn sẽ cần một số công việc để cho phép thêm cùng một mục nhiều lần nếu bạn muốn điều đó.