我有一个数字数组,当一个项目被添加到这个数组时,数字应该被这个项目替换。当另一个项目被添加到数组时,从数组中删除项目
我遇到的问题是,大部分的时间将取代数量,但有时它会增加旁编号的项目。
我在拆卸项目时也有同样的问题数量有时会出现项目旁边。
而且它目前允许添加的项目进行了多次这样,如果一个项目被添加两次,它会显示该项目的一个实例,删除按钮已被点击了两次实际删除该项目。
我怎样才能防止旁边时添加/移除,并且还可以防止能够添加一个项目一次以上的项目出现数量的行为?
https://codesandbox.io/s/jp26jrkk89
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],
addedArray: [],
data: [
{ id: 1, header: 'Item 1' },
{ id: 2, header: 'Item 2' },
{ id: 3, header: 'Item 3' },
{ id: 4, header: 'Item 4' }
],
addedItems: [],
}
}
handleAdd = (id) => {
const nextAdded = [id, ...this.state.addedArray];
this.setState({
addedArray: nextAdded,
addedItems: update(this.state.addedItems, {
$push: [
id,
],
})
})
}
handleRemove = (id) => {
const index = this.state.addedItems.indexOf(id);
const nextAdded = this.state.addedArray.filter(n => n != id);
this.setState({
addedArray: nextAdded,
addedItems: update(this.state.addedItems, {
$splice: [
[index, 1]
],
})
})
}
render() {
return (
<div>
<NumberWrap>
{
this.state.placeholder.map(num =>
<Numbers>
{this.state.addedArray.filter(n => n == num).length == 0 && num}
{
this.state.data.filter(item => {
return this.state.addedItems.indexOf(item.id) === num - 1;
}).slice(0, 5).map(item =>
<Product {...item} remove={() => { this.handleRemove(item.id) }} />
)
}
</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;
addedItems和addedArray的用法是什么? –