Estoy tratando de llamar a this
dentro de la función onClick
que está dentro del objeto, pero no estoy definido en la consola. ¿Por qué está pasando esto?
Panel.tsx:
import * as React from 'react'; import PanelInterface from './Panel.Interface'; import Config from "../../Config"; const Panel: React.FC<PanelInterface> = (props) => { const config = new Config({ panel : { onClick: function() { console.log(this); } } }).get(); return ( <div {...config.panel}/> ); }; export default Panel;
Config.ts:
export default class Config { private readonly configuration: any; constructor(configuration: Object) { this.configuration = configuration; } public get(): any { return this.configuration; } }
Salida de la consola:
undefined undefined
Editar: las funciones de flecha de uso no tienen efecto. También indefinido en la salida.
Editar: la pregunta se cerró como un duplicado, aunque no lo es. Logré resolver el problema cambiando en Panel.Config:
export default new Config({ panel : { className : css.panel, onClick: () => { console.log(this); } } });
a:
const config = new Config({ panel : { className : css.panel, onClick: () => { console.log(config); } } }); export default config;
Entonces, en onClick en lugar de this
, puedo usar config
.