Есть ли простой способ распространить свойства объекта в качестве функций событий? ⇐ Javascript

[Anonymous]

У меня есть интерфейс с названием «Набор данных», который имеет дополнительное свойство, которое представляет собой объект с различными дополнительными функциями событий на нем: < /p>

Код: Выделить всё

export interface DataSet {
colour: string;
value: number;
events?: {
onAuxClick?(event: React.MouseEvent, data: DataSet): void;
onBlur?(event: React.FocusEvent, data: DataSet): void;
onClick?(event: React.MouseEvent, data: DataSet): void;
onDoubleClick?(event: React.MouseEvent, data: DataSet): void;
onFocus?(event: React.FocusEvent, data: DataSet): void;
onKeyDown?(event: React.KeyboardEvent, data: DataSet): void;
onKeyPress?(event: React.KeyboardEvent, data: DataSet): void;
onKeyUp?(event: React.KeyboardEvent, data: DataSet): void;
onMouseDown?(event: React.MouseEvent, data: DataSet): void;
onMouseEnter?(event: React.MouseEvent, data: DataSet): void;
onMouseLeave?(event: React.MouseEvent, data: DataSet): void;
onMouseMove?(event: React.MouseEvent, data: DataSet): void;
onMouseOut?(event: React.MouseEvent, data: DataSet): void;
onMouseUp?(event: React.MouseEvent, data: DataSet): void;
onPointerCancel?(event: React.PointerEvent, data: DataSet): void;
onPointerDown?(event: React.PointerEvent, data: DataSet): void;
onPointerEnter?(event: React.PointerEvent, data: DataSet): void;
onPointerLeave?(event: React.PointerEvent, data: DataSet): void;
onPointerMove?(event: React.PointerEvent, data: DataSet): void;
onPointerOut?(event: React.PointerEvent, data: DataSet): void;
onPointerUp?(event: React.PointerEvent, data: DataSet): void;
onTouchCancel?(event: React.TouchEvent, data: DataSet): void;
onTouchEnd?(event: React.TouchEvent, data: DataSet): void;
onTouchMove?(event: React.TouchEvent, data: DataSet): void;
onTouchStart?(event: React.TouchEvent, data: DataSet): void;
}
}
< /code>
В компоненте я вытекаю на массив этих объектов «набора данных» для создания svgpathemletents и прикрепления этих событий к элементу (в то же время передавая объект «набор данных» в саму функцию) < /p>
data.map((dataEntry, index) => {
segments.push(
onAuxClick={(event) => dataEntry.events?.onAuxClick ? dataEntry.events?.onAuxClick(event, dataEntry) : null}
onBlur={(event) => dataEntry.events?.onBlur ? dataEntry.events?.onBlur(event, dataEntry) : null}
onClick={(event) => dataEntry.events?.onClick ? dataEntry.events?.onClick(event, dataEntry) : null}
onDoubleClick={(event) => dataEntry.events?.onDoubleClick ? dataEntry.events?.onDoubleClick(event, dataEntry) : null}
onFocus={(event) => dataEntry.events?.onFocus ? dataEntry.events?.onFocus(event, dataEntry) : null}
onKeyDown={(event) => dataEntry.events?.onKeyDown ? dataEntry.events?.onKeyDown(event, dataEntry) : null}
onKeyPress={(event) => dataEntry.events?.onKeyPress ? dataEntry.events?.onKeyPress(event, dataEntry) : null}
onKeyUp={(event) => dataEntry.events?.onKeyUp ? dataEntry.events?.onKeyUp(event, dataEntry) : null}
onMouseDown={(event) => dataEntry.events?.onMouseDown ? dataEntry.events?.onMouseDown(event, dataEntry) : null}
onMouseEnter={(event) => dataEntry.events?.onMouseEnter ? dataEntry.events?.onMouseEnter(event, dataEntry) : null}
onMouseLeave={(event) => dataEntry.events?.onMouseLeave ? dataEntry.events?.onMouseLeave(event, dataEntry) : null}
onMouseMove={(event) => dataEntry.events?.onMouseMove ? dataEntry.events?.onMouseMove(event, dataEntry) : null}
onMouseOut={(event) =>  dataEntry.events?.onMouseOut ? dataEntry.events?.onMouseOut(event, dataEntry) : null}
onMouseUp={(event) => dataEntry.events?.onMouseUp ? dataEntry.events?.onMouseUp(event, dataEntry) : null}
onPointerCancel={(event) => dataEntry.events?.onPointerCancel ? dataEntry.events?.onPointerCancel(event, dataEntry) : null}
onPointerDown={(event) => dataEntry.events?.onPointerDown ? dataEntry.events?.onPointerDown(event, dataEntry) : null}
onPointerEnter={(event) => dataEntry.events?.onPointerEnter ? dataEntry.events?.onPointerEnter(event, dataEntry) : null}
onPointerLeave={(event) => dataEntry.events?.onPointerLeave ? dataEntry.events?.onPointerLeave(event, dataEntry) : null}
onPointerMove={(event) => dataEntry.events?.onPointerMove ? dataEntry.events?.onPointerMove(event, dataEntry) : null}
onPointerOut={(event) => dataEntry.events?.onPointerOut ? dataEntry.events?.onPointerOut(event, dataEntry) : null}
onPointerUp={(event) => dataEntry.events?.onPointerUp ? dataEntry.events?.onPointerUp(event, dataEntry) : null}
onTouchCancel={(event) => dataEntry.events?.onTouchCancel ? dataEntry.events?.onTouchCancel(event, dataEntry) : null}
onTouchEnd={(event) => dataEntry.events?.onTouchEnd ? dataEntry.events?.onTouchEnd(event, dataEntry) : null}
onTouchMove={(event) => dataEntry.events?.onTouchMove ? dataEntry.events?.onTouchMove(event, dataEntry) : null}
onTouchStart={(event) => dataEntry.events?.onTouchStart ? dataEntry.events?.onTouchStart(event, dataEntry) : null}
/>);
})
< /code>
(я удалил нерелевантные части приведенного выше кода) < /p>
Если я добавлю много других событий в интерфейс, это будет немного времени, чтобы явно добавить их в компонент. < /p>
. Компонент тоже? Или мой подход к определению их в наборе данных сделал стержень для моей спины? (Передача объекта набора данных в функцию, вероятно, также несколько усложняет ситуацию, тоже)
Я попробовал {... dataEntry.events} 

, но это не сработало (я думаю, что полученный код будет просто функциями, не связывая их с событиями на элементе)
, как и в ихмаре, есть элемент. иметь функцию щелчка, но она ничего не сделает, если она не определена в наборе данных) или реагирует достаточно умный, чтобы разбить их, когда функция просто возвращает NULL без дальнейшей обработки?

Подробнее здесь: https://stackoverflow.com/questions/796 ... -functions