React 绑定事件的四种方式_事件传参_表单事件_受控组件与非受控组件

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.stopPropagationevent.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')
);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值