React 入门：事件处理

最新推荐文章于 2024-08-05 09:35:59 发布

原创最新推荐文章于 2024-08-05 09:35:59 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #前端框架

React 学习实战笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了React中事件处理的规范，包括使用onCamelCase属性绑定事件处理函数，通过preventDefault阻止默认行为，以及避免频繁使用ref。同时，提到了如何通过event.target获取DOM元素，并展示了向事件处理函数传递参数的两种方式。强调了在React应用中正确和高效处理事件的重要性。

通过 onXxx 属性指定事件处理函数（注意大小写）

React 使用的是自定义（合成）事件，而不是使用的原生 DOM 事件，目的是为了更好的兼容性。
React 中的事件是通过事件委托的方式来处理的（委托给组件最外层的元素），目的是为了更高效。

语法规则：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

示例代码：

<script type="text/babel"> /* 此处一定要写babel */

      // 1. 创建类式组件
      class InputBox extends React.Component {

          showInputValue = () => {}

          render() {
              return (
                  <div>
                      <p><input onBlur={this.showInputValue} type="text" placeholder="失去焦点提示数据" /></p>
                  </div>
              )
          }
      }

      // 渲染组件到页面
      ReactDOM.render(<InputBox />, document.getElementById('app'));
  </script>

阻止默认行为

在 React 中事件绑定函数中不能通过返回 false 的方式阻止默认行为，必须显式的使用 preventDefault。

示例代码：

<script type="text/babel"> /* 此处一定要写babel */

      // 1. 创建类式组件
      class InputBox extends React.Component {

          showInputValue = (event) => {
            // 阻止默认行为
            event.preventDefault()
          }

          render() {
              return (
                  <div>
                      <p><input onBlur={this.showInputValue} type="text" placeholder="失去焦点提示数据" /></p>
                  </div>
              )
          }
      }

      // 渲染组件到页面
      ReactDOM.render(<InputBox />, document.getElementById('app'));
  </script>

避免过度频繁的使用 ref 属性

通过 event.target 得到发生事件的 DOM 元素对象。

示例代码：

<script type="text/babel"> /* 此处一定要写babel */

      // 1. 创建类式组件
      class InputBox extends React.Component {

          // 通过 event.target 方式实现
          showInputValue = (event) => {
              console.log(`input2.value: ${event.target.value}`)
          }

          render() {
              return (
                  <div>
                      <p><input onBlur={this.showInputValue} type="text" placeholder="失去焦点提示数据" /></p>
                  </div>
              )
          }
      }

      // 渲染组件到页面
      ReactDOM.render(<InputBox />, document.getElementById('app'));
  </script>

向事件处理函数传递业务参数

例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

// 方式一
<button onClick={(e) => this.deleteRow(id, e)}>删除行</button>

// 方式二
<button onClick={this.deleteRow.bind(this, id)}>删除行</button>

本文持续更新，敬请关注 >>>