jsx 绑定事件

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')
);

效果见下图