7.React事件的介绍

事件处理

React 事件的命名采用小驼峰式(camelCase),而不是纯小写。

<button onClick={activateLasers}>
  Activate Lasers
</button>

例如,下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`,这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

向事件函数传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/react/9722.html

(0)
上一篇 2021年11月6日 03:25
下一篇 2021年11月26日 15:02

相关推荐

  • 3.React JSX的两种形式

    JSX是JavaScript eXtension(JavaScript 的语法扩展)的缩写,JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。 React 会将以小写字母开头的…

    React教程 2021年11月3日
    03250
  • 2.React元素渲染的流程

    1.创建DOM容器 2.创建React元素 2.1创建JSX 2.2JSX自动转换为浏览器原生支持 2.3浏览器原生支持转换为React元素(JS对象) 3.渲染React元素

    React教程 2021年11月2日
    04020
  • 4.React元素(JS 对象)的介绍

    这个对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。

    React教程 2021年11月4日
    04200

发表回复

登录后才能评论