Example of React Event Handling
DrYSG opened this issue · 3 comments
Any chance of adding to the readme a simple React Event Handling example?
I am getting the error:
jquery.js:3855 Uncaught Error: Expected onClick listener to be a function, instead got type string
Basically, I am trying to create an event handler for the JSX template. But it seems to be putting in a string instead of a function handle.
I also would really like to use the new 0.14 syntax for defining classes, but I don't see where to put the handler.
Anyway, below is where I am now, and the issue is not the rendering, it is the
button onClick={this.handleClick}
$(document).ready(creator);
function activateLasers(e) {
alert("lasers on");
}
function creator() {
t7.module(function (t7) {
t7.setOutput(t7.Outputs.React);
const Wrapper = props => (
t7`
<div>
<h1>Wrapper-${props.name}</h1>
<Inner name=${props.name} />
</div>
`
);
Wrapper.displayName = "Wrapper";
Wrapper.propTypes = {
name: React.PropTypes.string
};
class Inner extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return t7`
<div>
<h2>Inner-${this.props.name}</h2>
<button onClick={this.handleClick}>
Activate Lasers
</button>
</div>
`
};
};
Inner.displayName = "Inner";
Inner.propTypes = {
name: React.PropTypes.string
};
t7.assign({
"Wrapper": Wrapper,
"Inner": Inner
});
ReactDOM.render(
t7`<Wrapper name="YSG"/>`,
document.getElementById('root')
);
});
}
Silly me, (see below for the fix). But I would still like to see some updated examples, using the new const creator, as well as other JSX type things such as maps, propTypes, etc.
$(document).ready(creator);
function activateLasers(e) {
alert("lasers on");
}
function creator() {
t7.module(function (t7) {
t7.setOutput(t7.Outputs.React);
const Wrapper = props => (
t7`
<div>
<h1>Wrapper-${props.name}</h1>
<Inner name=${props.name} />
</div>
`
);
Wrapper.displayName = "Wrapper";
Wrapper.propTypes = {
name: React.PropTypes.string
};
class Inner extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return t7`
<div>
<h2>Inner-${this.props.name}</h2>
<button onClick=${this.handleClick}>
${this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
</div>
`
};
};
Inner.displayName = "Inner";
Inner.propTypes = {
name: React.PropTypes.string
};
t7.assign({
"Wrapper": Wrapper,
"Inner": Inner
});
ReactDOM.render(
t7`<Wrapper name="YSG"/>`,
document.getElementById('root')
);
});
}
@DrYSG You're totally right and I'm eager to add maintainers to this project to help with all these areas, if you'd like to contribute (as I really lack the time these days), please feel free to jump onto the Inferno Slack and ping me there when I'm around. https://inferno-slack.herokuapp.com/ (t7 and Inferno share the same slack).
Unfortunately, my company blocks Slack from our offices.