React事件处理和表单的绑定详解

更新时间：2022年08月31日 15:30:35 作者：小绵杨Yancy

这篇文章主要介绍了React事件处理和表单的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、事件处理

1.1 React事件

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。例如onclick属性应该写成onClick。
如果采用 JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。例如已经定义了一个名为handleClick的函数，应该这样调用：

<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>

而不是：

<button onClick="handleClick()">Button</button>

1.2 事件对象

在事件发生时调用的函数，默认是自带一个参数的，这个参数通常被命名为event，就是事件对象。

例如，我们为一个input输入框的onchange事件设置一个函数，获取事件对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class MyInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          console.log(event);
          console.log(event.target);
        }
        render() {
          return (
            <div>
              <span>Input:</span>
              <input type="text" onChange={this.handleChange} />
            </div>
          );
        }
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

可以看到，event.target就是触发事件的dom元素。

1.3 事件传参

除了自带的默认参数（事件对象）外，有时候我们需要额外传递传输给事件处理的函数，这个时候不能直接调用函数并传参，例如下面的用法是错误的：

<input type="text" onChange={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->this.handleChange(1)} />

正确的用法应该是使用匿名函数来实现传参：

<input type="text" onChange={() => this.handleChange(event, "id")}/>

此时处理函数handleChange:

handleChange(event, id) {
      console.log(event.target.value);
      console.log(id);
}

第一个参数一定是事件对象，后面的参数名称随意，但是顺序必须一一对应。

1.4 函数组件事件处理

通过上面的例子不难看出，class组件有一个非常麻烦的点在于必须在构造函数中声明并绑定方法的this:

右边中的this：这个this是在构造器方法中的，所以它的指向是组件的实例对象；

右边handleChange方法：这个方法是在类的原型对象上的；而使用bind的函数把这个原型对象方法上的this修改成类实例对象上的this，右边的代码执行完成之后生成一个新的函数，然后把这个新函数放到实例的自身上也就是等式的左边，且给这个函数起了一个名字（左边方法名），这样就能解决原型方法上其他方法调用该方法this指向是undefined的问题了。此时其他方法调用该函数时this就指向的是实例对象了

而函数式组件中，就简单了许多：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function MyInput() {
        function handleChange(event, id) {
          console.log(event.target.value);
          console.log(id);
        }
        return (
          <div>
            <span>Input:</span>
            <input type="text" onChange={() => handleChange(event, "id")} />
          </div>
        );
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

二、表单

双向绑定

在vue中，可以使用v-model指令实现表单的双向绑定，但是实际上，v-model只是v-bind和v-on的语法糖，在react中，我们可以直接利用属性和属性改变的处理事件实现双向绑定的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        constructor(props) {
          super(props);
          this.state = { value: "Hello React!" };
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          this.setState({ value: event.target.value });
        }
        render() {
          let value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <h4>{value}</h4>
            </div>
          );
        }
      }
      ReactDOM.render(<HelloMessage />, document.getElementById("app"));
    </script>
  </body>
</html>

到此这篇关于React事件处理和表单的绑定详解的文章就介绍到这了,更多相关React事件处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react PropTypes校验传递的值操作示例
这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
2020-04-04
create-react-app项目配置全解析
这篇文章主要为大家介绍了create-react-app项目配置全解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
React 组件间的通信示例
这篇文章主要介绍了React 组件间的通信示例，主要通信划分为三种，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
React状态更新的优先级机制源码解析
这篇文章主要为大家介绍了React状态更新的优先级机制源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
使用useImperativeHandle时父组件第一次没拿到子组件的问题
这篇文章主要介绍了使用useImperativeHandle时父组件第一次没拿到子组件的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React避坑指南之useEffect 依赖引用类型问题分析
这篇文章主要介绍了React避坑指南之useEffect 依赖引用类型问题分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
React条件渲染实例讲解使用
在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI
2022-11-11
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React Hooks - useContetx和useReducer的使用实例详解
这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
react中涉及的增加,删除list方式
这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01