React 的事件处理

React 的事件处理

方法一
class flower extends Component {
    // 在react中 状态的的修改是使用setatate（）
    //   setatate是用来改变视图的
    constructor(props) {
        super(props)
        this.state = {
            info: '没有改变啊'
        }
    }

// 事件处理程序直接写在类里面
//修改状态 setstate()
 setachang = () => {
        this.setState({
            info: '按钮成功了'
        })
    }
render() {
    return (
        <div>
            <button onClick={this.setachang}>按钮</button>
            <p>{this.state.info}</p>
        </div>
    )
}
}
export default flower

1. 事件处理程序我们是直接定义为实例方法
  2. 事件处理程序我们建议写成箭头函数 - this指向不改变

  修改状态
    ! 在React中状态的修改只能使用setState()
    ! setState() 的作用是用来更新视图的
    ! setState是异步的
  setState( obj/function, callback ) 参数是有两个的

! 参数是对象
this.setState({
info: ‘哈哈哈’
})

方法二
class flower extends Component {
    // 在react中 状态的的修改是使用setatate（）
    //   setatate是用来改变视图的
    constructor(props) {
        super(props)
        this.state = {
            info: '没有改变啊'
        }
    }
  setachang=()=>{

    this.setState(() => {
        return {
            info: '哈哈哈哈哈'
        }
    })

  }
render() {
    return (
        <div>
            <button onClick={this.setachang}>按钮</button>
            <p>{this.state.info}</p>
        </div>
    )
}
}
export default flower

构造函数的作用

1. 通过super 将 父组件的props继承到 this.props
2. 定义状态 state

state的修改 - setState

1. setState是React中唯一提供的可以更改state的api
2. setState在一个事件循环中是异步的
3. setState参数有两个
   1. 第一个参数是用来修改状态的，可以是Object/function
      • function必须要有返回值
   2. 第二个参数是一个回调函数，可以说是一个由数据改变而引起的副作用执行
4. React中为一个可以更新视图的就是setState
5. 参数是方法 - 方法时必须要有返回值的，返回值是对象