2020-06-12 01:19:35 +03:00
|
|
|
<head>
|
|
|
|
|
<script src="./react/react@16.13.1.production.min.js"></script>
|
|
|
|
|
<script src="./react/react-dom@16.13.1.production.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class='react-root'></div>
|
|
|
|
|
<script>
|
|
|
|
|
window.e = React.createElement;
|
|
|
|
|
window.reactRoot = document.querySelector('.react-root');
|
|
|
|
|
window.renderComponent = c => ReactDOM.render(c, window.reactRoot);
|
2020-06-27 02:31:51 +03:00
|
|
|
|
|
|
|
|
window.MyButton = class MyButton extends React.Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = { hovered: false };
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
return e('button', {
|
|
|
|
|
disabled: !!this.props.disabled,
|
|
|
|
|
onClick: () => {
|
|
|
|
|
window[this.props.name] = true;
|
|
|
|
|
},
|
|
|
|
|
onMouseEnter: () => {
|
|
|
|
|
if (this.props.renameOnHover)
|
|
|
|
|
this.setState({ hovered: true });
|
|
|
|
|
if (this.props.onHover)
|
|
|
|
|
this.props.onHover();
|
|
|
|
|
},
|
|
|
|
|
}, this.state.hovered ? 'Hovered' : this.props.name);
|
|
|
|
|
}
|
|
|
|
|
};
|
2020-06-12 01:19:35 +03:00
|
|
|
</script>
|
|
|
|
|
</body>
|
