Nested custom component loses scope #44
Description
On the following example, the second click function loses the scope and doesn't work. I presume is realted to this issue #31
live example https://codesandbox.io/s/mobx-nested-custom-component-with-spread-pfxo4?file=/index.js
import { render, Component, spread } from "mobx-jsx";
function Box(props) {
let el = document.createElement("div");
spread(el, () => props);
return el;
}
class App extends Component {
render() {
return (
<div>
<div>
<Box onClick={() => this.didClick()}>click me (this works)</Box>
</div>
<Box>
<Box onClick={() => this.didClick()}>click me (this doesnt work)</Box>
</Box>
</div>
);
}
didClick() {
console.log("did click");
}
}
render(() => <App />, document.getElementById("app"));gets compiled as
class App extends Component {
render() {
return (() => {
const _el$ = _tmpl$.cloneNode(true),
_el$2 = _el$.firstChild;
insert(_el$2, createComponent(Box, {
onClick: () => this.didClick(),
children: "click me (this works)"
}));
insert(_el$, createComponent(Box, {
get children() {
return createComponent(Box, {
onClick: () => this.didClick(),
children: "click me (this doesnt work)"
});
}
}), null);
return _el$;
})();
}
didClick() {
console.log('did click');
}
}