Class based
class MyButton extends React.Component{
//init
constructor(props) {
super(props);
this.state ={btnText:"click me"}
this._clk = this.clk.bind(this)
}
clk(){
this.setState({
btnText:"click!"
});
}
render(){
return(
<div>
<button type="button" id="123" onClick={this._clk}>{this.state.btnText}</button>
</div>
)
}
}
ReactDOM.render(
<MyButton />,
document.getElementById('root')
);
Functional based
var NewComponent = React.createClass({
getInitialState: function(){
return {
textContent:"click me"
};
},
_event:function(e){
console.log("click");
console.log(e.target.textContent);
this.setState({
textContent:"click!"
});
},
render: function() {
return (
<div>
<button type="button" id="123" onClick={this._event}>{this.state.textContent}</button>
</div>
);
}
});
ReactDOM.render(
React.createElement(NewComponent,{
}),
document.getElementById('root')
);