jsx 绑定事件,用法如下
1、使用箭头函数进行绑定
class Poetry extends React.Component {
constructor() {
super()
this.state = {
content : '一向年光有限身。等闲离别易销魂。酒筵歌席莫辞频。'
}
}
change() {
this.setState(
{
content : '满目山河空念远,落花风雨更伤春。不如怜取眼前人。'
}
)
}
render() {
return (
<div>
<p>{this.state.content}</p>
<button onClick={() => {this.change()}}>修改</button>
</div>
)
}
}
ReactDOM.render(
<Poetry/>,
document.getElementById('root')
);
效果见下图
2、在构造函数中绑定 this
class Poetry extends React.Component {
constructor() {
super()
this.state = {
content : '从别后,忆相逢。几回魂梦与君同。'
}
this.change = this.change.bind(this)
}
change() {
this.setState(
{
content : '今宵剩把银釭照,犹恐相逢是梦中。'
}
)
}
render() {
return (
<div>
<p>{this.state.content}</p>
<button onClick={this.change}>修改</button>
</div>
)
}
}
ReactDOM.render(
<Poetry/>,
document.getElementById('root')
);
效果见下图
3、事件传递参数
class Poetry extends React.Component {
constructor() {
super()
this.state = {
content : ''
}
}
change(e) {
this.setState(
{
content : e.target.value
}
)
}
render() {
return (
<div>
<p>{this.state.content}</p>
<input type="text" onChange={(e)=>{this.change(e)}}/>
</div>
)
}
}
ReactDOM.render(
<Poetry/>,
document.getElementById('root')
);
效果见下图