Вопрос о best practices в Реакте.
Есть компонент ItemsList выводящий в цикле компонент Item . Каждый Item состоит из нескольких дивов, несколько из которых должны откликаться на клик.
Чтобы не городить огород из онКликов вешаю один обработчик onClick, спущенный с App компонента, на корневой элемент Item, и на верх передаю уже любой клик по Itemу, само событие и индекс кликнутого Itema.
export default class Item extends React.Component {
render() {
const { item, index, onClick } = this.props;
return (
<div className="item" onClick={e => onClick(index, e)}>
<div className="item-over">...</div>
<div className="item-main">
<div className="item-text">...</div>
<div className="item-hint">...</div>
<div className="item-extra">...</div>
</div>
</div>
);
}
}
В App, где вся логика, принимаю:
onItemClick = (index, e) => {
switch (e.target.className) {
case "item-over":
console.log("Клинкнут блок над айтмом " + index);
break;
case "item-text":
console.log("Кликнут основной текст в айтеме " + index);
break;
case "item-hint":
console.log("Кликнут доп текст в айтиме " + index);
break;
case "item-extra":
console.log("Кликнут дополнительный блок а айтиме");
break;
default: {
}
}
};
Ну перед этим естественно передаю ссылку на обработчик и собственно данные для отображения:
<ItemsList items={items} onClick={this.onItemClick} />
Вопрос - нормально ли так поступать в React и если нет - то как сделать правильно?
На мой взгляд - куча условий в обработчике смотрится не очень и идентификация элемента по классу тоже как-то сомнительно выглядит.
