Функция onClick для определенного элемента в функции карты

Question

В моем состоянии хранятся объекты (рабочие элементы) с различными атрибутами, такими как идентификатор, заголовок, описание и т. Д. Я отображаю их в моем рендере в таблице, чтобы сделать их видимыми. Все идет нормально. Но когда я пытаюсь объявить «onClick» внутри функции карты, он будет срабатывать не только для конкретного элемента, на котором был выполнен щелчок, но и для всех объектов рабочих элементов на карте.

В моем рендере;

{workitem.company ? workitem.company + " - " : ""}

      <a href={workitem.url} target="_blank">{workitem.title}</a>
      <div className="description pt-2" onClick=  {this.descriptionPopOut(workitem.description)>  // My onclick function                            
           <strong>Description: </strong>                                         
           {workitem.description ? this.trimWord(workitem.description.replace("...", ""), 850, "...")
                                  : ""}{" "}
                                  ...
      </div>

OnClick приведет к очень простой функции, которая имеет предупреждение и примет описание объекта в качестве ввода.

descriptionPopOut = (description) => {
   alert(description); 
}

Выше будет отображаться предупреждение со всем свойством описания объекта, а не для конкретного элемента, который был нажат. Есть ли способ решить это?

javascript reactjs

0

Arte 28 Окт 2019 в 10:39

Answer 1

Это потому, что при каждом рендере ваша функция вызывает i.e

this.descriptionPopOut(workitem.description)

, Пока вы хотите позвонить, когда вы нажимаете. Вы можете либо связать функцию, чтобы использовать ее позже при нажатии:

this.descriptionPopOut.bind(this, workitem.description)

Или вы можете использовать функцию жирной стрелки, чтобы вернуть функцию, т.е.

onClick = {() => this.descriptionPopOut(workitem.description)>

(Он гарантирует, что он создает ссылку на функцию, и когда вы щелкаете по ней, она вызывает вашу функцию с определенным параметром)

1

Shubham Verma 28 Окт 2019 в 07:58

Answer 2

Проблема в том, что вы неправильно вызываете свою функцию.

Не делай этого onClick = {this.descriptionPopOut(workitem.description)>

Поскольку вы хотите передать параметр, сделайте это

onClick = {() => this.descriptionPopOut(workitem.description)>

1

Atin Singh 28 Окт 2019 в 07:50

Answer 3

Вы вызываете функцию в каждой итерации.

Попробуйте сделать так:

this.descriptionPopOut.bind(this, workitem.description)

1

dmitri7 28 Окт 2019 в 07:50

Функция onClick для определенного элемента в функции карты

3 ответа

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

Новые вопросы

javascript