React / js onClick на родительском div и дочернем div. Родитель всегда стреляет

Я думаю, если вам нужны нормализованные таблицы данных - вам нужно попробовать другие решения для баз данных.

Но у меня есть решение о разрешении для MOngo на Git Кстати , вставляет код - у него есть имя фильма, но идентификатор фильма noi.

Проблема

У вас есть коллекция Актеров с массивом фильмов, которые они сделали.

Вы хотите создать коллекцию фильмов с массивом Актеров в каждом.

Некоторые данные образца

 db.actors.insert( { actor: "Richard Gere", movies: ['Pretty Woman', 'Runaway Bride', 'Chicago'] });
 db.actors.insert( { actor: "Julia Roberts", movies: ['Pretty Woman', 'Runaway Bride', 'Erin Brockovich'] });

Решение

Нам нужно прокрутить каждый фильм в документе Actor и выдать каждый фильм по отдельности.

Улов здесь находится в фазе уменьшения. Мы не можем испускать массив из фазы уменьшения, поэтому мы должны построить массив Actors внутри возвращаемого документа «value».

Код

map = function() {
  for(var i in this.movies){
    key = { movie: this.movies[i] };
    value = { actors: [ this.actor ] };
    emit(key, value);
  }
}

reduce = function(key, values) {
  actor_list = { actors: [] };
  for(var i in values) {
    actor_list.actors = values[i].actors.concat(actor_list.actors);
  }
  return actor_list;
}

Обратите внимание, что actor_list - это фактически объект javascript, который содержит массив. Также обратите внимание, что карта испускает ту же структуру.

Запустите следующую команду, чтобы выполнить карту / уменьшить, вывести ее в коллекцию «pivot» и напечатать результат:

printjson (db. actors.mapReduce (карта, уменьшить, «поворот»)); db.pivot.find (). forEach (printjson);

Вот пример вывода, обратите внимание, что у «Pretty Woman» и «Runaway Bride» есть как «Richard Gere», так и «Julia Roberts».

{ "_id" : { "movie" : "Chicago" }, "value" : { "actors" : [ "Richard Gere" ] } }
{ "_id" : { "movie" : "Erin Brockovich" }, "value" : { "actors" : [ "Julia Roberts" ] } }
{ "_id" : { "movie" : "Pretty Woman" }, "value" : { "actors" : [ "Richard Gere", "Julia Roberts" ] } }
{ "_id" : { "movie" : "Runaway Bride" }, "value" : { "actors" : [ "Richard Gere", "Julia Roberts" ] } }

1
задан Johan Jönsson 17 January 2019 в 14:27
поделиться

2 ответа

передать в e функцию и использовать

e.stopPropagation ();

<div onClick={() => props.onClick(MenuSection.Default)} >
      <div <span><InfoIcon /></span> Some info</div>
      <div>More Info</div>
      <div>Even more Info</div>
      <div onClick={(e) => e.stopPropagation();props.onClick(MenuSection.NotDefault)}><InfoIcon /></div>
</div>

Но я бы также переместил встроенную функцию onClick из метод render и ссылка на него с помощью this.nameOfClickMethod, nameOfClickMethod, конечно же, будет названо по вашему выбору.

0
ответ дан Robbie Bardijn 17 January 2019 в 14:27
поделиться

Вы можете использовать event.stopPropagation(). Это предотвращает распространение события.

<div> onClick={() => { props.onClick(MenuSection.Default)} } >
          <div <span><InfoIcon /></span> Some info</div>
          <div>More Info</div>
          <div>Even more Info</div>
          <div onClick={(e) => { e.stopPropagation();props.onClick(MenuSection.NotDefault)}}><InfoIcon /></div>
    </div>
0
ответ дан JS Engine 17 January 2019 в 14:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: