React-事件处理

事件处理

绑定事件

采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。

事件handler的写法

• 直接在render里写行内的箭头函数(不推荐)

class App extends Component {
  render() {
    return (
      <div className="App">    
        <h3>事件处理</h3>
        <button onClick={()=>{ alert(2)} }>第一方法事件处理</button>
      </div>
    );
  }
}

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

import React,{Component} from 'react';
class App extends Component {
  change = () =>{
    alert(2)
  }
  
  render() {
    return (
      <div className="App">    
        <h3>事件处理</h3>
        <button onClick={ this.change }>第二种方法事件处理</button> 
      </div>
    );
  }
}

export default App;

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

import React,{Component} from 'react';
class App extends Component {
  change(){
      alert(1)
  }
  render() {
    return (
      <div className="App">    
        <h3>事件处理</h3>
        <button onClick={ this.change.bind(this) }>第三种方法事件处理</button> 
      </div>
    );
  }
}

export default App;

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

import React,{Component} from 'react';
class App extends Component {
  constructor(){
    this.change = this.change.bind(this)  
  }
  change(){
      alert(1)
  }
  render() {
    return (
      <div className="App">    
        <h3>事件处理</h3>
        <button onClick={ this.change }>第四种方法事件处理</button> 
      </div>
    );
  }
}

export default App;

Event 对象

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

import React,{ Component } from 'react'

class App extends Component{
    eventHander(e){//这里的e指代事件对象
        console.log(e.target)//<button>事件对象</button>
        console.log(e)
    }
    render(){
        return(
            <div className="App">
                <button onClick={ this.eventHander }>事件对象</button>
            </div>
        )
    }
}

export default App

事件的参数传递

• 在render里调用方法的地方外面包一层箭头函数

import React,{ Component } from 'react'

class App extends Component{

    argumentHander(a,b){
        console.log(a + b)
    }
    
    render(){
        return(
            <div className="App">
               <button onClick = {()=>{this.argumentHander(10,20)}}>事件传参</button>
            </div>
        )
    }
}

export default App

• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递

import React,{ Component } from 'react'

class App extends Component{

    argumentHander(a,b){
        console.log(a + b)
    }
    
    render(){
        return(
            <div className="App">
              <button onClick = {this.argumentHander.bind(this,10,20)}>事件传参</button>
            </div>
        )
    }
}

export default App

• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

import React,{ Component } from 'react'
import Home from './components/home'

class App extends Component{

    transmitHander(a,b,e){
        console.log(e)
        console.log(a + b)    
    }
    
    render(){
        return(
            <div className="App">
              <Home fn = {this.transmitHander}></Home>
            </div>
        )
    }
}

export default App

Home组件

import React,{Component,Fragment} from 'react'
class Home extends Component{
    render() {
        return(
            <Fragment>
                <button onClick={()=>{this.props.fn(10,20)}}>事件-父组件传递</button>
            </Fragment>
        )
    }
}

export default Home;

处理用户输入

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

class App extends Component {
  constructor() {
    super()
    this.state = {
      xing: '',
      ming: ''
    }
  }
  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  render () {
    const {
      xing,
      ming
    } = this.state
    return (
  		<div>
        <label>
          <span>姓:</span>
          <input
            type="text"
            name="xing"
            value={xing}
            onChange={this.handleInputChange}
          />
        </label>
        <label>
          <span>名:</span>
          <input
            type="text"
            name="ming"
            value={ming}
            onChange={this.handleInputChange}
          />
        </label>
        <p>欢迎您: {xing}{ming}</p>
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

第二种

父组件

import React,{ Component } from 'react'
import Home from './components/home'

class App extends Component{

    transmitHander(a,b,e){
        console.log(e)
        console.log(a + b)    
    }
    
    render(){
        return(
            <div className="App">
              <Home fn = {this.transmitHander}></Home>
            </div>
        )
    }
}

export default App

子组件

import React,{Component,Fragment} from 'react'
class Home extends Component{
    inputHander = (e) =>{
        if(e.keyCode === 13){
            console.log(11111)
            console.log(e)
            e.target.value='请输入：'
        }       
    }
    inputFocus(e){
        e.target.value = ''
    }
    render() {
        return(
            <Fragment>
                <input onFocus={this.inputFocus} onKeyUp={this.inputHander} type='text' defaultValue='请输入：'/>
            </Fragment>
        )
    }
}

export default Home;