jsx 绑定事件

最新推荐文章于 2024-10-11 21:20:42 发布

原创最新推荐文章于 2024-10-11 21:20:42 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在React中使用JSX进行事件绑定的三种方法：使用箭头函数、在构造函数中绑定this以及事件传递参数。通过具体示例，展示了如何在React组件中更新状态并响应用户交互。

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

效果见下图