Cześć!
Niestety znów poległem przy react'cie i chciałbym Was prosić o wytłumaczenie o co chodzi.
Mam plik Generator.js a w nim, między innymi, 2 metody:
renderModules(modulesPerPage, pageIndex){
var type = webStorage.getItem('type-id');
var modules = [];
var item = null;
const { products, dustbins } = this.state;
for (var j = 0; j < modulesPerPage; j++) {
modules.push(
<Dustbin
accepts={
[ItemTypes.GLASS]
}
lastDroppedItem={
dustbins[(pageIndex) * type + j]
}
onDrop={
item => this.handleDrop((pageIndex) * type + j, item)
}
key={
(pageIndex) * type + j
}
id={
(pageIndex) * type + j
}
/>,
);
}
return modules;
}
handleDrop(index, item) {
console.log(item);
console.log(index);
const { name } = item;
this.setState(update(this.state, {
dustbins: {
[index]: {
$set: item,
},
},
droppedBoxNames: name ? {
$push: [name],
} : {},
}));
}
Oraz plik Dustbin.js:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
const style = {
height: '12rem',
width: '12rem',
marginRight: '1.5rem',
marginBottom: '1.5rem',
color: 'white',
padding: '1rem',
textAlign: 'center',
fontSize: '1rem',
lineHeight: 'normal',
float: 'left',
};
const dustbinTarget = {
drop(props, monitor) {
props.onDrop(props.id, monitor.getItem());
},
};
class Dustbin extends Component {
render() {
const { accepts, isOver, canDrop, connectDropTarget, lastDroppedItem } = this.props;
const isActive = isOver;
let backgroundColor = '#222';
if (isActive) {
backgroundColor = 'darkgreen';
} else if (canDrop) {
backgroundColor = 'darkkhaki';
}
return connectDropTarget(
<div style={{ ...style, backgroundColor }}>
{isActive ?
'Release to drop' :
`This dustbin accepts: ${accepts.join(', ')}`
}
{lastDroppedItem &&
<p>Last dropped: {JSON.stringify(lastDroppedItem)}</p>
}
</div>,
);
}
}
Dustbin.propTypes = {
connectDropTarget: PropTypes.func.isRequired,
isOver: PropTypes.bool.isRequired,
canDrop: PropTypes.bool.isRequired,
accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
lastDroppedItem: PropTypes.object,
onDrop: PropTypes.func.isRequired,
};
export default DropTarget(props => props.accepts, dustbinTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}))(Dustbin);
W Generator.js przekazuję do dustbin'u metodę handleDrop(). Oczekuję że zostanie do niej przekazany unikalny id (jak key czy id) oraz inny element. Niestety, za każdym razem pierwszym argumentem jest liczba o 1 większa niż powinna być (powinno być 9, zwraca mi 10) i za bardzo nie rozumiem czemu tak się dzieje. Próbowałem, w pliku dustbin.js w metodzie drop, przekazać mu jako pierwszy parametr id które mnie interesuje, niestety nie działa to tak jak bym chciał. W końcu domyśliłem się po co jest
item => this.handleDrop((pageIndex) * type + j, item)
więc, jako że wywołuję z 2 argumentami, zrobiłem tak
(index, item) => this.handleDrop((pageIndex) * type + j, item)
Niestety, index nadal wynosi o jeden więcej niż j. Za nic nie mogę dojść co tu się dzieje, w związku z tym bardzo bym prosił o wytłumaczenie.
Z góry dzięki wielkie :)