【React】事件处理

事件绑定

在React里，类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this关键词。

• React 采用on+事件名的方式来绑定一个事件
• 但是和原生事件是有区别的：
• 原生事件全是小写onclick
• React里面的事件是驼峰写法onClick
• React的事件并不是原生事件，而是合成事件

事件写法

• 注意点：

1. 在写事件的时候，调用是如果不涉及传参的话，一定不要加()，加了就错
onClick={clickHandler}与onClick={clickHandler()}
2. 在类组件中写事件处理程序的时候，不能写标准的`function xxx () {}`，写了就报错，一定要用简化的写法或者箭头函数形式
3. 事件处理属性名称（事件绑定时用的属性）一定要使用符合react的小驼峰写法：aaBbb

• 在组件内使用箭头函数定义一个方法（推荐）

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component{
	constructor(){
		super();
		this.state = {num:0};
	}
	handleChange = () => {
		this.setState({
			num:this.state.num+1
		})
	}
	render(){
		return(<>
            {/*点击绑定函数的事件*/}
			<button onClick={this.handleChange}>++</button>{this.state.num}
		</>)
	}
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

• 直接在render里面写行内的箭头函数（不推荐）

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component{
	constructor(){
		super();
		this.state = {num:0};
	}
	render(){
		return(<>
            {/*点击绑定函数的事件*/}
			<button onClick={()=>{this.setState({num:this.state.num+1})}}>++</button>{this.state.num}
		</>)
	}
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

• 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用bind(this)(不推荐)

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component{
	constructor(){
		super();
		this.state = {num:0};
	}
	handleChange (){
		this.setState({
			num:this.state.num+1
		})
	}
	render(){
		return(<>
            {/*点击绑定函数的事件*/}
			<button onClick={this.handleChange.bind(this)}>++</button>{this.state.num}
		</>)
	}
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

• 直接在组件内定义一个非箭头函数的方法，然后在constructor里直接使用bind(this)(不推荐)

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component{
	constructor(){
		super();
		this.state = {num:0};
        this.handleChange = this.handleChange.bind(this);
	}
	handleChange (){
		this.setState({
			num:this.state.num+1
		})
	}
	render(){
		return(<>
            {/*点击绑定函数的事件*/}
			<button onClick={this.handleChange}>++</button>{this.state.num}
		</>)
	}
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。

不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component{
	constructor(){
		super();
		this.state = {};
	}
	render(){
		return(<>
            {/*点击绑定函数的事件*/}
			<button onClick={(ev) => {  console.log("事件运行了", ev);}}>点击触发事件</button>
		</>)
	}
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

• 阻止默认事件

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    }
    render() {
        return (<div>
            <a href="https://www.baidu.com" onClick={(e) => {
                e.preventDefault();
                console.log("默认事件已阻止，不会跳转到百度了");
            }}> 百度</a>
        </div>);
    }
}

事件传参

推荐使用方式：做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用 状态提升

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { num1: 0 ,num2: 0}
    }
    handleChangeNum1 = (n) => {
        this.setState({ num1: this.state.num1 + n })
    }
    handleChangeNum2 = (n) => {
        this.setState({ num2: this.state.num2 + n })
    }
    handleEvent = (ev) => {
        console.log(ev);

    }
    render() {
        return (<div>
            <button onClick={() => { this.handleChangeNum1(2) }}>点击绑定函数的事件{this.state.num1}</button>
            <button onClick={this.handleChangeNum2.bind(this, 3)}>点击绑定函数的事件{this.state.num2}</button>
            {/* event 传参，可以默认就传过去 */}
            <button onClick={this.handleEvent}>event</button>
            <a href="https://www.baidu.com" onClick={(e) => {
                e.preventDefault();
                console.log("默认事件已阻止");

            }}> 百度</a>
        </div>);
    }
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

处理表单

• 处理用户输入时，可以按照表单name来保存state的值，不需要写两个函数来处理

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            text: ""
        }
    }
    // 写两个函数来处理:
    // changeName = (ev) => {
    //     this.setState({ name: ev.target.value })
    // }
    // changeText = (ev) => {
    //     this.setState({ text: ev.target.value })
    // }
    changeValue = (ev) => {
        //console.log();
        this.setState({ [ev.target.name]: ev.target.value })
    }
    submitForm = (ev) => {
        //获取表单中input框的数据
        console.log("提交的数据,名字：" + this.state.username + ",他的文章是：" + this.state.text);
        ev.preventDefault();
    }
    render() {
        return (<div>
            <form onSubmit={this.submitForm}>
                姓名：<input type="text" name="username" value={this.state.username} onChange={this.changeValue} />
                文章：
                <textarea value={this.state.text} name="text" onChange={this.changeValue}></textarea>
                <input type="submit" value="提交" />
            </form>
        </div>);
    }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)