React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件

69 阅读 0 评论 46 点赞

我是靠谱客的博主失眠刺猬，最近开发中收集的这篇文章主要介绍React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 简介

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

React 事件绑定属性的命名采用驼峰式写法，而不是小写，例如原生的事件全是小写 onclick，React 里的事件是驼峰 onClick。
如果采用 JSX 的语法需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。
React的事件并不是原生事件，而是合成事件。
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 e.preventDefault()。

HTML 通常写法是：

<button onclick="clickHandle()">提交</button>
<script>
function clickHandle(e){
e.preventDefault();	//阻止默认事件
//或者使用如下的写法
return false;
}
</script>

React 中写法为：

<button onClick={clickHandle}>提交</button>
<script>
function clickHandle(e){
e.preventDefault();	//阻止默认事件，不能使用return false
}
</script>

2. React 绑定事件的几种方式

当使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。
必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

2.1 方式一

在回调函数中使用箭头函数，直接在 render() 里写行内的箭头函数(不推荐)，这种写法存在的问题就是，当每次执行render() 的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Box extends Component {
handleClick(e,val){
console.log(e,val);
}
render() {
return (
<button onClick={(e)=>this.handleClick(e,'aa')}>添加</button>
);
}
}
ReactDOM.render(
<Box />,
document.getElementById('root')
);

2.2 方式二

在 render() 方法中，使用 bind 绑定 this(不推荐)。直接在组件内定义一个非箭头函数的方法，然后在render里直接使用onClick={this.handleClick.bind(this)}，这种方式的缺点是，每次都使用 bind 绑定 this，代码会冗余：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Box extends Component {
handleClick(val,e) {	//事件对象e要放在最后
console.log(val,e);
}
render() {
return (
<button onClick={this.handleClick.bind(this, 'aa')}>添加</button>
);
}
}
ReactDOM.render(
<Box />,
document.getElementById('root')
);

2.3 方式三

使用属性初始化器来正确的绑定回调函数(推荐)，在组件内使用箭头函数定义一个方法，这种方式的缺点是不能自定义传参：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Box extends Component {
handleClick =(e)=>{
console.log(e);
}
render() {
return (
<button onClick={this.handleClick}>添加</button>
);
}
}
ReactDOM.render(
<Box />,
document.getElementById('root')
);

2.4 方式四

直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)，这种方式的优点是性能比较好，不管render()执行多少次，最终都指向同一个引用。这种方式的缺点是不能自定义传参。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Box extends Component {
constructor(){
super();
this.myhandleClick = this.handleClick.bind(this);
}
handleClick(e){
console.log(e);
}
render() {
return (
<button onClick={this.myhandleClick}>添加</button>
);
}
}
ReactDOM.render(
<Box />,
document.getElementById('root')
);

3. React 事件传参

和普通浏览器一样，事件 handleClick 会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法。

为事件处理程序传递额外的参数，通常使用上面前两种（2.1、2.2）方式，即：

<button onClick={(e)=>this.handleClick(e, 'aa')}>添加</button>
<button onClick={this.handleClick.bind(this, 'aa')}>添加</button>

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面。

3.1 子组件中修改参数

在子组件中修改父组件传过来的参数，比较推荐的方法是, 在父组件中定义方法，子组件中调用父组件的方法，通过props传递到子组件中，然后在子组件中通过this.props.method来调用。看下面的例子：

子组件中代码：

class Button extends Component {
handleClick(){
//执行DOM元素的 change属性
this.props.change();
}
render() {
return (
<button onClick={()=>this.handleClick()}>
{this.props.children}
</button>
);
}
}

父组件中代码：

class Counter extends Component {
constructor() {
super();
this.state = {
count: 0
}
}
handleChange(type) {
this.setState((preState, props) => {
count: preState.count + 1
}
}, () => { })
}
render() {
return (
<div >
<Button change={() => this.handleChange()}>-</Button>
</div>
);
}
}

4. 表单事件

HTML 表单元素与 React 中的其他 DOM 元素有所不同，因为表单元素生来就保留一些内部状态。

在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

4.1 受控组件

对于受控组件来说，输入的值始终由 React 的 state 驱动。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

例如，如果想让用户输入的小写字母全部转成大写字母，我们可以将表单写为受控组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Form extends Component {
constructor() {
super();
this.state = {name: ""}
}
handleChange(event) {
this.setState({
name: event.target.value.toUpperCase() //	将输入的字母转成大写
})
}
render() {
return (
<div>名称：<input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} /></div>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('root')
);

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。使用 onChange 事件来监听 input 的变化，并修改 state。由于 handlechange 在每次按键时都会执行并更新 React 的 state，将字母转成大写，因此显示的值将随着用户输入而更新。

4.2 多个 input 元素

当有多个 input 元素需要处理时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name的值来选择做什么。
在 React 中，<textarea> 使用 value 属性代替。这样，可以使得使用 <textarea> 的表单和使用单行 input 的表单非常类似。
在 React 中，Select 下拉菜单，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项，当 Select 为多选时，对应的 state 应该为一个数组。
注意：<input type=“file”> 的 value 只读，所以它是 React 中的一个非受控组件。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Form extends Component {
constructor() {
super();
this.state = {
name: "",
desc: "",
city: [1,2]
}
}
handleChange(event) {
if(event.target.name==='city'){
this.state.city.push(event.target.value);
this.setState({})
return;
}
this.setState({
[event.target.name]: event.target.value
})
}
render() {
return (
<div>
名称：<input type="text" value={this.state.name} name="name" onChange={this.handleChange.bind(this)} />
描述：<textarea name="desc" value={this.state.desc} onChange={this.handleChange.bind(this)}></textarea>
城市：<select name="city" multiple
value={this.state.city}
onChange={this.handleChange.bind(this)}>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
</select>
</div>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('root')
);

总的来说，这使得 <input type=“text”>, <textarea> 和 <select> 之类的标签都非常相似—它们都接受一个 value 属性，你可以使用它来实现受控组件。

4.3 受控组件应用场景

受控组件的应用场景：可以监听用户输入，改变用户输入的数据。例如上面将输入的字母转成大写、判断用户是否输入为空等。

如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 Formik 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上

有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过一个 React 组件传递所有的输入 state。在这些情况下，你可能希望使用非受控组件, 这是实现输入表单的另一种方式。

4.4 非受控组件

非受控组件，组件展示的值，完全不受 state 的控制。使用 ref 属性，用来绑定到 render() 输出的任何组件上。通过 ref 属性获取绑定的 DOM 元素，跟 vue 中 ref 的使用类似。

ref 使用方法：

当 ref 属性值为静态内容时：
1、绑定一个 ref 属性到 render 的返回值上；
2、通过 this.refs 获取绑定的 DOM 元素；

当 ref 属性值为 state 时：
1、使用 import 导入 react.createRef ；
2、将 state 作为 ref 的属性值，绑定到 render 的返回值上；
3、通过 state.current 获取绑定的 DOM 元素；

import React, { Component,createRef } from 'react';
import ReactDOM from 'react-dom';
class Form extends Component {
constructor() {
super();
this.title = createRef()
}
handleSubmit = () => {
console.log(this.title.current.value)
console.log(this.refs.myInput.value)
}
render() {
return (
<div>
<input type="text" ref={this.title}/>
<input type="text" ref='myInput'/>
<button onClick={this.handleSubmit}>提交</button>
</div>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('root')
);

最后

以上就是失眠刺猬为你收集整理的React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件的全部内容，希望文章能够帮你解决React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：react
浏览次数：69 次浏览
发布日期：2023-11-01 16:30:43
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_18_f2_12__23__10_3.html

React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件

概述

1. 简介

2. React 绑定事件的几种方式

2.1 方式一

2.2 方式二

2.3 方式三

2.4 方式四

3. React 事件传参

3.1 子组件中修改参数

4. 表单事件

4.1 受控组件

4.2 多个 input 元素

4.3 受控组件应用场景

4.4 非受控组件

最后

评论列表共有 0 条评论

发表评论取消回复

React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件1. 简介2. React 绑定事件的几种方式3. React 事件传参4. 表单事件

概述

1. 简介

2. React 绑定事件的几种方式

2.1 方式一

2.2 方式二

2.3 方式三

2.4 方式四

3. React 事件传参

3.1 子组件中修改参数

4. 表单事件

4.1 受控组件

4.2 多个 input 元素

4.3 受控组件应用场景

4.4 非受控组件

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复