1.注册事件

  • React注册事件与DOM的事件语法非常像
  • 语法on+事件名=｛事件处理程序｝ 比如onClick={this.handleClick}
  • 注意：React事件采用驼峰命名法，比如onMouseEnter, onClick
class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }

  handleClick() {
    console.log('点击事件触发了')
  }
}

2.事件对象

  • 可以通过事件处理程序的参数获取到事件对象

  • React 中的事件对象叫做：合成事件（对象）

  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

function handleClick(e) {
    e.preventDefault()
    console.log('事件对象', e)
}
<a onClick={this.handleClick}>点我，不会跳转页面</a>

3.this指向问题

  • 事件处理程序中的this指向的是undefined
  • render方法中的this指向的而是当前react组件。只有事件处理程序中的this有问题

分析原因：

  • class的内部，开启了局部严格模式use strict，所以this不会指向window undefined
  • onClick={this.fn}中，this.fn的调用并不是通过类的实例调用的，所以值是undefined
  • render函数是被组件实例调用的，因此render函数中的this指向当前组件
class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

　　

 

4.this指向问题解决方案

  • 方案1：箭头函数
  • 方案2：bind修改this指向
  • 方案3：类实例方法

方式一：

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  render() {
    return (
      <div>
        <button onClick={() => { console.log(this.state.msg) }>点我</button>
      </div>
    )
  }
}

方式二：

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

方式三：【推荐】

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

注意：这个语法是试验性的语法，但是有babel的转义，所以没有任何问题

第三种方式开发使用的最多。　　

5.setState修改状态

  • 组件中的状态是可变的

  • 语法this.setState({要修改的数据})

  • 注意：不要直接修改state中的值，必须通过this.setState()方法进行修改

  • setState的作用

    • 修改state

    • 更新UI

  • 思想：数据驱动视图

class App extends React.Component {
  state = {
    count: 1
  }
  handleClick=()=>{
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <p>次数: {this.state.count}</p>
        <button onClick={this.handleClick}>点我+1</button>
      </div>
    )
  }
}

6.受控组件使用

  • 在state中添加一个状态，作为表单元素的value值（控制表单元素的值）

  • 给表单元素添加change事件，设置state的值为表单元素的值（控制值的变化）

常见的受控组件：

  • 文本框、文本域、下拉框（操作value属性）

  • 复选框（操作checked属性）

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

7.非受控组件-ref(不推荐使用)

非受控组件借助于ref，使用原生DOM的方式来获取表单元素的值

  • 调用React.createRef()方法创建一个ref
constructor() {
  super()
  this.txtRef = React.createRef()
}
txtRef = React.createRef()
  • 将创建好的ref对象添加到文本框中
<input type="text" ref={this.txtRef}/>
  • 通过ref对象获取文本框的值
handleClick = () => {
  console.log(this.txtRef.current.value)
}

非受控组件用的不多，推荐使用受控组件

　

 

　　

 

原文地址：http://www.cnblogs.com/lijingru/p/16864571.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性