React组件基础二

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)
}

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