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

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

标签：render,基础,React,msg,state,事件,组件
From： https://www.cnblogs.com/lijingru/p/16864571.html